Prevent layout shift

Cumulative Layout Shift is when content on your page shifts. The site visitor could lose track of what they are looking at or reading as the page loads. It’s a sub-optimal user experience and it negatively impacts performance measurements like Lighthouse. Learn more about CLS.

Video players are notorious for causing CLS because the dimensions/metadata of the media file are unknown until sufficient data is loaded. Use this guide to make sure your Media Chrome player is not causing CLS in your web application.

The best way is to set an aspect ratio on <media-controller>

The aspect-ratio style is standard CSS supported by all evergreen browsers. Most often, you’ll want the aspect-ratio to match your video content’s aspect ratio.

Example with a video that has a 16/9 aspect ratio:

<media-controller style="aspect-ratio: 16/9">
  <video
    slot="media"
    src="https://stream.mux.com/BlSb4AuUfA00wchgJ3D00bz4VTppg3eo5Y/high.mp4"
    poster="https://image.mux.com/BlSb4AuUfA00wchgJ3D00bz4VTppg3eo5Y/thumbnail.jpg"
    muted
    preload="none"
    crossorigin
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-mute-button></media-mute-button>
    <media-volume-range></media-volume-range>
    <media-time-display></media-time-display>
    <media-time-range></media-time-range>
    <media-duration-display></media-duration-display>
    <media-playback-rate-button></media-playback-rate-button>
    <media-fullscreen-button></media-fullscreen-button>
  </media-control-bar>
</media-controller>

If your browser doesn’t support aspect-ratio, you can always set width and height explicitly:

<media-controller style="width: 800px; height: calc(800px * 9/16)">
  <!-- for 16:9 aspect ratio where you want an explicit width and a "derived" height -->
  <video
    slot="media"
    src="https://stream.mux.com/BlSb4AuUfA00wchgJ3D00bz4VTppg3eo5Y/high.mp4"
    poster="https://image.mux.com/BlSb4AuUfA00wchgJ3D00bz4VTppg3eo5Y/thumbnail.jpg"
    muted
    preload="none"
    crossorigin
  ></video>
  <media-control-bar>
    <media-play-button></media-play-button>
    <media-mute-button></media-mute-button>
    <media-volume-range></media-volume-range>
    <media-time-display></media-time-display>
    <media-time-range></media-time-range>
    <media-duration-display></media-duration-display>
    <media-playback-rate-button></media-playback-rate-button>
    <media-fullscreen-button></media-fullscreen-button>
  </media-control-bar>
</media-controller>