При оптимизации видео для Core Web Vitals обязательно установите атрибуты width
и height
в теге <video>
. В зависимости от ситуации вы также можете использовать атрибут poster
.
Атрибуты
width
иheight
. Чтобы предотвратить сдвиги макета, установите атрибутыwidth
иheight
в теге<video>
. Это позволяет браузеру определить размеры видео (и зарезервировать правильное количество места), не дожидаясь загрузки видео.Атрибут
poster
(необязательно) : атрибутposter
определяет изображение, которое должно отображаться во время загрузки видео. Если видео является элементом LCP, LCP определяется по времени отрисовки постера, а не по времени загрузки всего видео. Если этот атрибут не указан, браузер будет ждать, пока не станет доступен первый кадр видео, а затем использовать его в качестве изображения постера; видео без атрибутаposter
в настоящее время не учитываются в категории «Наибольшая содержательная краска» .
В этом примере CSS используется для обеспечения изменения размера видео в соответствии с его контейнером. Это не влияет на Web Vitals, но является полезным методом.
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;
}