동영상

코어 웹 바이탈에 맞게 동영상을 최적화할 때는 <video> 태그에서 width 및 height 속성을 설정해야 합니다. 상황에 따라 poster 속성을 활용할 수도 있습니다.

• width 및 height 속성: 레이아웃 변경을 방지하려면 <video> 태그에서 width 및 height 속성을 설정합니다. 이렇게 하면 브라우저에서 동영상이 다운로드될 때까지 기다릴 필요 없이 동영상의 크기를 확인하고 적절한 공간을 확보할 수 있습니다.

• poster 속성 (선택사항): poster 속성은 동영상을 다운로드하는 동안 표시해야 하는 이미지를 지정합니다. 동영상이 LCP 요소인 경우 LCP는 전체 동영상이 로드될 때가 아니라 포스터 이미지가 렌더링되는 시점에 의해 결정됩니다. 이 속성을 지정하지 않으면 브라우저는 동영상의 첫 번째 프레임을 사용할 수 있을 때까지 기다린 후 이 이미지를 포스터 이미지로 사용합니다. poster 속성이 없는 동영상은 현재 최대 콘텐츠 렌더링 시간 기준으로 고려되지 않습니다.

이 예에서는 CSS를 사용하여 동영상이 컨테이너에 맞게 크기가 조절되도록 합니다. 이는 웹 바이탈에는 영향을 미치지 않지만 유용한 기법입니다.

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;
}