Lorsque vous optimisez la vidéo pour les Signaux Web essentiels, veillez à définir les attributs width
et height
dans la balise <video>
. Selon le cas, vous pouvez également utiliser l'attribut poster
.
Attributs
width
etheight
: pour éviter les décalages de mise en page, définissez les attributswidth
etheight
sur la balise<video>
. Cela permet au navigateur de déterminer les dimensions de la vidéo (et de réserver la quantité d'espace appropriée), sans avoir à attendre que le téléchargement de la vidéo soit terminé.Attribut
poster
(facultatif): l'attributposter
spécifie l'image à afficher lors du téléchargement d'une vidéo. Si une vidéo est l'élément LCP, le LCP est déterminé par l'heure du rendu de l'image poster, et non par le chargement de la vidéo globale. Si cet attribut n'est pas spécifié, le navigateur attend que la première image de la vidéo soit disponible avant de l'utiliser comme image poster. Actuellement, les vidéos sans attributposter
ne sont pas prises en compte pour le Largest Contentful Paint.
Dans cet exemple, le code CSS permet de s'assurer que la vidéo s'adapte à son conteneur. Cette technique n'a aucune incidence sur les Signaux Web, mais c'est une technique utile.
HTML
<video controls width="960" height="540" poster="flower-960-poster.png">
<source src="flower-960.mp4" type="video/mp4">
</video>
CSS
video {
max-width: 100%;
height: auto;
}