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

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -