How to get a video element to act like background-size: cover scoped within a parent element.

<section class="container">
  <video class="fullscreen" src="blurry-trees.mov" playsinline autoplay muted loop>
  </video>

  <div class="content">
    <h1>Headline</h1>
  </div>
  
</section>
video.fullscreen {
  position: absolute;
  z-index: 0;
  object-fit: cover; // this is the key
  width:100%;
  height:100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  &::-webkit-media-controls {
     display:none !important;
  }
}

.container {
   position: relative;
   display: grid;
   place-items: center;
   height: 70vh;
   width: 70vw;
   margin: 0 auto;
   background: #ccc;
}

.content {
  z-index: 1;
}

See the Pen CSS Video Background Cover by Kevin Dees (@kevindees) on CodePen.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get Involved & Explore More

an abstract painting with blue and yellow colors

Catch up on what I’ve been writing lately.

Show your gratitude.

Join Dare To Code Email List

Get emails from me on full-stack PHP development by subscribing to the Dare To Code mailing list.