Menu

Régler le soucis de dimension des éléments HTML video au chargement de la page

Publié en Septembre 2022 - Design & UI, Développement web

regler-le-soucis-de-dimension-des-elements-hmlt-video-2

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 !