Video

When optimizing video for Core Web Vitals make sure to set the width and height attributes on the <video> tag. Depending on the situation, you may also want to utilize the poster attribute.

• width and height attributes: To prevent layout shifts, set the width and height attributes on the <video> tag. This allows the browser to determine the dimensions of the video (and reserve the correct amount of space) - without having to wait for the video to download.

• poster attribute (optional): The poster attribute specifies the image that should be displayed while a video is downloading. If a video is the LCP element, LCP is determined by the time that the poster image is rendered - rather than when the overall video loads. If this attribute is not specified, the browser will wait until the first frame of the video is available, then use this as the poster image; videos without a poster attribute are currently not considered for Largest Contentful Paint.

In this example, CSS is used to ensure that the video resizes to fit its container. This has no impact on Web Vitals but is a useful technique.

<video controls width="960" height="540" poster="flower-960-poster.png">
    <source src="flower-960.mp4" type="video/mp4">
</video>

video {
    max-width: 100%;
    height: auto;
}