HTML Video Background #html #web

sample.css

.vid_bg {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    transition: display .3s;
    -webkit-transition: display .3s;
}

.vid_backdrop {
    position: absolute;
    max-width: none;
    left: 50%;
}

.vid_backdrop * {
  box-sizing: border-box;
}

.vid_mediael {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
}

sample.html

<!-- reference https://github.com/mediaelement/mediaelement -->
<div style="position: relative; overflow: hidden;"}>
  <div class="vid_bg">
	<div class="vid_backdrop" tabindex="0" role="application" aria-label="Video Player" style="width: 1202px; height: 676.125px; min-width: 0px; margin: 0px 0px 0px -601px;">
      <div class="vid_mediael">
        <mediaelementwrapper>
          <video loop="loop" autoplay="" playsinline="" muted="" preload="none" src="https://myurl.local/public/intro.mp4" style="margin: 0px; width: 1202px; height: 676.125px;">
          	<source type="video/mp4" src="https://myurl.local/public/intro.mp4">
          </video>
        </mediaelementwrapper>
      </div>
    </div>
  </div>
</div>