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
eheight
: para evitar mudanças de layout, defina os atributoswidth
eheight
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 atributoposter
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 atributoposter
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;
}