autoplay

This demo shows a <video> element with the autoplay attribute.

The <video> element does not have a poster image and is therefore not considered an LCP candidate.

View Source Code

<div style="position:relative;width:100%;height:24rem">
  <video
    autoplay
    muted
    playsinline
    loop
    style="position:absolute;object-fit:cover;height:100%;width:100%"
  >
    <source
      type="video/webm"
      src="../video-1920.webm?v=1671553389855"
    />
    <source
      type="video/mp4"
      src="../video-1920.mp4?v=1671553389855"
    />
  </video>
  <div
    style="background-color:rgba(0,0,0,0.33);position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;text-align:center;flex-direction:column;color:#ffffff;z-index:1"
  >
    <h1>
      AUTOPLAY
    </h1>
  </div>
</div>

Learn Performance - Video

autoplay