Question

I have an HTML video that I want to use as replacement for a background image that would be fullscreen, However currently it overflows and covers the entire page instead of just the constraints of the 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 anyone know what i have to do, to allow it just to fill the size of my header container? There's a few questions on a similar subject but none seem to answer my specific query.

Answer 1

Apply

position:relative

to your .site-header class

HTML video to cover 100% div

1 个答案: