lundi 13 juin 2016

what am I doing wrong with my full width video cover?

I'm trying to make a full width video cover for the header of a web but it keep bugging, What am I doing wrong?

this is part of my code:

<section id="home">
        <video poster="assets/img/home-bg.png" autoplay="autoplay" loop="loop" id="bgvid">
            <source src="assets/video/garage-video.mp4"" type="video/mp4"/>
         <!--  <source src="assets/video/trailer.webm" type="video/webm"/> --> 
        </video>

        <!-- HEADER LOGO & NAV -->
        <div class="filtro">

            <div class="logo">
            <img src="assets/img/garage-logo-blanco.png" alt="logo garage">
        </div>

This is the css:

section#home video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100vh;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    z-index: 1;
}

.filtro {
    z-index: 2;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(40, 88, 162, .55);
}

here is the entire code:

https://github.com/Luisbtz/garage3.0

here is the demo where you can find the bug, (The extra right padding):

http://luisbenitez.xyz/garage3.0/

Aucun commentaire:

Enregistrer un commentaire