Expérience élément video HTML5 avec CSS
💡 Petit côté rétro sur une vidéo en plein écran (fullscreen) avec la propriété CSS mix-blend-mode ainsi que l'utilisation des animations CSS :
Code :
HTML
<div class='exp-vid'>
<video loop="loop" src="votre_video.webm" controls muted=true autoplay></video>
<div></div>
<figcaption>Expérience balise video HTML5/CSS3</figcaption>
</div>
CSS
*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}
.exp-vid {
position: relative
}
.exp-vid video {
filter: sepia(1);
width: 100%
}
.exp-vid div{
width: 100%;
height: 90%;
mix-blend-mode: screen;
animation: anim 1s alternate infinite;
background: url(fond.jpg) no-repeat center center;
position: absolute;
top: 0;
left: 0
}
@keyframes anim{
0%,
20%,
40%,
60%,
80%,
100%{
opacity: .8;
background-position: -60px -60px,center center
}
10%,
30%,
50%,
70%,
90%{
opacity: 1;
background-position: -100px -100px,center center
}
}
Source, inspiration, ressources :
Se renseigner sur la balise html5 <video> (et <audio)
Vous rencontrez un problème avec cette démonstration ?
Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.