Vídeo

Ao otimizar vídeos para as Core Web Vitals, defina os atributos width e height na tag <video>. Dependendo da situação, você também pode usar o atributo poster.

• Atributos width e height: para evitar mudanças de layout, defina os atributos width e height na tag <video>. Isso permite que o navegador determine as dimensões do vídeo (e reserve a quantidade correta de espaço), sem precisar esperar o download do vídeo.

• Atributo poster (opcional): o atributo poster especifica a imagem que precisa ser mostrada durante o download de um vídeo. Se um vídeo for o elemento da LCP, a LCP vai ser determinada pelo tempo em que a imagem do pôster for renderizada, e não pelo carregamento do vídeo geral. Se esse atributo não for especificado, o navegador aguardará até que o primeiro frame do vídeo esteja disponível e o usará como a imagem do pôster. Vídeos sem um atributo poster não são considerados para a Maior exibição de conteúdo.

Neste exemplo, o CSS é usado para garantir que o vídeo seja redimensionado para caber no contêiner. Isso não afeta as Métricas da Web, mas é uma 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;
}