I can't figure out what's not working with my full-width video cover

I'm having trouble creating a full-width video cover for the header of a website. Can someone help me troubleshoot what I'm doing wrong?

Here is a snippet 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>

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

Here is the corresponding 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);
}

If you want to see the full code, you can check it out here.

You can also see the demo of the website here, where you might notice the extra right padding issue I'm facing.

htmlcss

Answer №1

the issue lies outside of the video element in your HTML code, specifically in this section:

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

it is recommended to remove the line left:20vh

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Convert HTML files to .csv format

Is there a way to export a table from an HTML page directly to a .csv file without having to use additional code? Currently, I am using the following method: private void GenerateExcelFileOnType(string filePath1, ref DataTable dt) { if ...

htmlmodel-view-controller

issues with re-invoking the button following dynamic addition/removal in Angular 2+

A textbox with add (+) and delete (-) buttons attached horizontally has been created. The first button lacks a delete section. Its image is - https://i.sstatic.net/lwco5.png Due to coding dependency, the add (+) button disappears after the first addition. ...

angularhtml

Guide on automatically extracting table rows and generating an Excel spreadsheet

I am currently working on a script that dynamically adds the first row (TH) to a table and then exports it to an Excel sheet. However, I am facing an issue where instead of appending each row, the script keeps stacking on top of the next table row. Below ...

javascriptjqueryhtmlexcel

Is there a way to remove a pseudo element in CSS using Internet Explorer

I've been struggling to make some pseudo elements work in Internet Explorer, but it seems like I can't get it to function as intended. It's as if IE is ignoring the CSS rules that I have set up for these elements, and it's quite frustr ...

cssinternet-explorerie-developer-tools

The error message "TypeError Cannot read properties of undefined (reading 'backdrop') - bootstrap v5.2.1 modal" is indicating that there is an

While working with the bootstrap modal, an error has been encountered ( TypeError Cannot read properties of undefined (reading 'backdrop') ), which has been logged in our bug tracker. However, attempts to replicate this error have been unsuccessf ...

javascripthtmlbootstrap-5bootstrap5-modal

External CSS File causing improper sizing of canvas image

I have been working on implementing the HTML5 canvas element. To draw an image into the canvas, I am using the following javascript code: var img = new Image(); var canvas = this.e; var ctx = canvas.getContext('2d'); img.src = options.imageSrc; ...

javascriptcsshtml

Angular 17 | Angular Material 17.3.1: Problem encountered with Angular Material form field focus and blur event handling

I attempted to apply (blur) and (focus) effects to my mat-form-field input field, but it seems like they are not working properly on my system. Here is a code snippet that resembles what I am using: html file <form class="example-form"> ...

htmlangulartypescriptangular-materialangular17

No match was found for the reverse of 'idname' with arguments '()'. Attempted 1 pattern: ['viewRegistration/(?P<pk_test>[0-9]+)/$']

When setting up my views, I have the following code: def home(request): if request.user.participant: current_user = request.user subscriptionUser = int(Subscription.objects.get(participant=current_user.participant).id) else ...

pythonhtmldjangoview

What sets apart elevation from z-index in material-ui?

As I delved into the material-ui documentation, I came across an interesting snippet: Various components in Material-UI make use of z-index, a crucial CSS property that aids in organizing content along a third axis. Material-UI employs a predefined z-in ...

reactjscssmaterial-uiz-index

Apply SetTimeout exclusively for desktop devices

A website I'm working on has a background video from YouTube using YTPlayer. To enhance the user experience, I have implemented a CSS spinner that displays while the page is loading. However, I noticed that the spinner disappears before the video fini ...

javascriptjqueryhtmlcss

What is the best way to include a specific stylesheet for Blackberry Curve devices based on certain conditions

Is there a method to include a custom style-sheet specifically for the 'Blackberry curve 2007'? Or perhaps implement a redirect that can identify this device and direct them to a different .html page? I'm looking to create a simplified versi ...

blackberrymobilecss

Why are my Bootstrap nav-tabs not showing tab-content in MVC?

I'm dynamically creating tab navigation from controllers using a list. <div class=""row> <div class="col-xl-3"> <!-- Tabs nav --> <div class="nav flex-column nav-pills nav-pills-custom" id="v-p ...

javascripthtmlasp.net-mvcasp.net-corebootstrap-4

Changing a button to text with PHP upon clicking

I am looking to create a button that, upon being clicked, will show a simple "X" on the website in the same location as the button itself. Essentially, the button will vanish and be replaced by an "X". The current code for my button is straightforward: &l ...

phphtmlbuttononclick

Permanently remove the span tag and any associated text from the HTML document

Currently, I am working on a project that involves numerous page numbers marked using the span class. Below is an example of this markup: <p>Cillacepro di to tem endelias eaquunto maximint eostrum eos dolorit et laboria estiati buscia ditiatiis il ...

javascriptjqueryhtmlcss

Utilize Python to extract a table from an HTML document

I would like to retrieve a table from an HTML file. Below is the code-snippet I have written in order to extract the first table: import urllib2 import os import time import traceback from bs4 import BeautifulSoup #find('table',{'class&ap ...

pythonhtmlcsvbeautifulsoup

Aligning an image in a way that adjusts to different screen sizes

Struggling with centering an image horizontally in a responsive manner while using Bootstrap v3.3.5? Here's my code: <div class="container"> <div style="margin:0 auto;"> <img src="images/logo.png" alt="logo" /> ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

dynamically adjust table cell width based on number of rows

My HTML structure is as follows: <table border=1 > <tr> <!--this tr has one <td> that needs to be 100% width--> <td></td> </tr> <tr> <!--this tr has two <td> that each need to be ...

javascriptjqueryhtmlcss

Setting default selections for mat-select component in Angular 6

I've been attempting to preselect multiple options in a mat-select element, but I haven't been successful so far. Below is the snippet of HTML code: <mat-dialog-content [formGroup]="form"> <mat-form-field> <mat-select pla ...

htmlangulartypescriptangular-material

Tips for customizing the color of the current date in the angular-material datepicker

I've created a function in angular-material to disable dates two days from now, but I'm struggling to change the color of the current date if it's disabled. The issue is that when the current date is disabled, it displays in a very light blu ...

javascriptcssangularjsdatepickerangular-material

Showcase each video stored within a specific directory in the form of a list using HTML 5

I'm working on an application that requires me to showcase a series of videos on a single HTML5 page using the video tag. Despite successfully uploading files to my folder, I am struggling to display them properly. My search for a solution has been fr ...

phphtml