Luis Benitez Luis Benitez - 1 year ago 42
CSS Question

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"/> -->

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

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

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:

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

Answer Source

your problem is not in the video but in other part of your HTML, here:

section#confiables .mecanico-img .left {
  left: 20vh;
  position: relative;
  top: 30vh;

remove left:20vh