I'm currently facing an issue with using an HTML video as a fullscreen background replacement for an image. The problem is that the video overflows and covers the entire page instead of staying within the constraints of the header section.
Here is the HTML code:
<header id="masthead" class="site-header" role="banner">
<video autoplay loop poster="<?php bloginfo('stylesheet_directory'); ?>/img/main.jpg" id="bgvid">
<source src="<?php bloginfo('stylesheet_directory'); ?>/vid/dumbells.webm" type="video/webm">
<source src="<?php bloginfo('stylesheet_directory'); ?>/vid/dumbells.mp4" type="video/mp4">
</video>
</header>
CSS code:
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(img/main.jpg) no-repeat;
background-size: cover;
}
.site-header {
left: 0px;
top:0px;
z-index: 1;
float: none;
width: 100%;
height: 100%;
overflow:hidden;
text-align:center;
padding: 130px 0 141px;
}
I need help figuring out how to make the video fill just the size of my header container without overflowing. I've looked at similar questions but haven't found a solution that works for me yet.