JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<div id="video-container">
<video
  id="video"
  autoplay=""
  loop=""
  style="background-image:url(&quot;https://cdn.prod.website-files.com/63f0c4da59fff8a225a1667a/65138726b636704d4633f9b1_BannerHDHome-poster-00001.jpg&quot;)"
  muted=""
  playsinline="">
    <source src="https://cdn.prod.website-files.com/63f0c4da59fff8a225a1667a/65138726b636704d4633f9b1_BannerHDHome-transcode.mp4">
    <source src="https://cdn.prod.website-files.com/63f0c4da59fff8a225a1667a/65138726b636704d4633f9b1_BannerHDHome-transcode.webm">
 </video>
 </div>

CSS

#video-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

#video {
  object-fit: cover;
  position: relative;
  width: 100%;
}