Vidéo

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 et height: pour éviter les décalages de mise en page, définissez les attributs width et height 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'attribut poster 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 attribut poster 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;
}