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 or the first frame of the video. As images are typically lighter, using poster images can result in a faster LCP.

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