JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<video autoplay muted loop poster="#" id="backgroundVideo">
  <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4" type="video/mp4">
</video>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
  font-size: 17px;
}

#backgroundVideo {
  width: calc(100vw - (100vw - 100%));
  height: calc(100vh - (100vh - 100%));
  position: relative;
  margin: 0;
  display: block;
  object-fit: cover;
  
}

.background-vid-content {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  padding: 20px;
  width: 100%;
}