동영상
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
코어 웹 바이탈에 맞게 동영상을 최적화할 때는 <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;
}
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2024-03-13(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]