Un soucis d'implémentation de la spécification de l'élément HTML <video>
à été trouvé sur les navigateurs basés sur WebKit (voir le sujet du w3c). Le navigateur ne traite pas bien les dimensions données par les attributs width
et height
de l'élément pour appliquer son aspect-ratio
créant au moment du chargement de cette dernière un saut dans le contenu, appelé un CLS (Cumulative Layout Shift).
Voici un hack très simple permettant de régler ce soucis en attendant que les navigateurs réparent ce bug. L'idée est d'utiliser l'attribut poster
de l'élément video, qui permet normalement d'afficher une vignette tant que la vidéo est en cours de téléchargement, en y plaçant un <svg>
vide avec les mêmes dimensions que la vidéo dans cet attribut. Le navigateur calculera bien le ratio d'affichage par rapport à ces dimensions. Voici un exemple pour une vidéo en 800x600 :
<video width="800" height="600" poster="data:image/svg+xml;utf8,<svg width='800' height='600' xmlns='http://www.w3.org/2000/svg'></svg>"> <source src="votre-fichier-video.mp4" type="video/mp4"> </video>
Et voila !