Para videos

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 y height: Para evitar cambios de diseño, configura los atributos width y height 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 atributo poster 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 atributo poster 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;
}