Cuando optimices el video para las Métricas web esenciales, asegúrate de configurar los atributos width
y
height
en la etiqueta <video>
. Según la situación, te recomendamos que también uses el atributo poster
.
Atributos
width
yheight
: Para evitar cambios de diseño, configura los atributoswidth
yheight
en la etiqueta<video>
. De esta manera, el navegador puede determinar las dimensiones del video (y reservar la cantidad de espacio correcta), sin tener que esperar a que se descargue el video.Atributo
poster
(opcional): El atributoposter
especifica la imagen que se debe mostrar mientras se descarga un video. Si un video es el elemento LCP, el LCP se determina por el momento en que se renderiza la imagen de póster, en lugar de cuando se carga el video general. Si no se especifica este atributo, el navegador esperará hasta que esté disponible el primer fotograma del video y, luego, lo usará como imagen de póster. Por el momento, los videos sin un atributoposter
no se consideran para Largest Contentful Paint.
En este ejemplo, se usa CSS para garantizar que el video cambie de tamaño para adaptarse al contenedor. Esto no influye en las Métricas web, pero es una técnica útil.
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;
}