Skip to content
About Blog Learn Explore Patterns Case studies
  • Home
  • All patterns
  • Video

Video

Aug 19, 2021 — Updated Aug 19, 2021

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;
}
Open demo
Last updated: Aug 19, 2021 — Improve article
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.