css - HTML video to cover 100% div -
i have html video want use replacement background image fullscreen, overflows , covers entire page instead of constraints of header.
html:
<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:
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; }
does know have do, allow fill size of header container? there's few questions on similar subject none seem answer specific query.
apply
position:relative
to .site-header class
Comments
Post a Comment