<section class="video-hero" poster="https://any-day.com/wp-content/uploads/2021/06/home-poster.png">
  <video muted="" autoplay="" playsinline="" loop="" src="https://anyday2-17cf1.kxcdn.com/gradient2.mp4" data-src="https://anyday2-17cf1.kxcdn.com/gradient2.mp4"></video>
</section>
.video-hero {
  height: 300px;
  width: 100%;
  overflow: hidden;
}
.video-hero video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.