After searching online and attempting two different methods, I am still unable to achieve the desired result.
I want a video to cover the entire background of my webpage. Here is what I have tried:
CSS -
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
HTML -
<video playsinline autoplay muted loop poster="img/videoframe.jpg" id="bgvid">
<source src="https://streamable.com/kuuap9" type="video/mp4">
</video>
Unfortunately, this does not display anything as the website background. Am I overlooking something or is there a simpler solution?
Another method I attempted without success is as follows:
CSS-
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML-
<div class="fullscreen-bg">
<video playsinline autoplay muted loop poster="img/videoframe.jpg" id="bgvid">
<source src="https://streamable.com/kuuap9" type="video/mp4">
</video>
</div>
Any assistance or guidance would be greatly appreciated. Thank you!