Prevent layout shift

Cumulative Layout Shift is when content on your page shifts. 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. 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>