The overlay is larger in size compared to the video positioned beneath it

I'm having trouble placing a video underneath a purple layer as the overlay isn't aligning properly with my video.

After removing the background-size: cover; in the home section, it appears like this:

.videoContainer {}

.videoContainer .overlay { /* ? */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: .5;
}

.videoContainer video {
  width: 100%;
  position: absolute;
  z-index: -1;
}

.home-section {
  // background-size: cover;
  background-repeat: no-repeat;
  background-image: url('?');
  z-index: 9999;
}
<div class="home-section section">
  <div class="videoContainer">
    <video autoplay loop muted>
      <source src="?" type="video/mp4">
    </video>
  </div>
</div>
Edited: added source code link:

Download source code

htmlcss

Answer №1

After reviewing the source code you provided, I have identified some CSS modifications that should help achieve your desired outcome.

Currently, there are two issues with your approach. First, the video is not being stretched to fill the .home-section, and secondly, the background image (overlay) of .home-section is also not being stretched to fill the container.

.home-section {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../res/bg_color_home.png);
    /* Be sure to remove the z-index declaration */
}
.videoContainer {
    /* Ensure the video container fills its parent: */
    position: absolute;
    width: 100%;
    height: 100%;
    /* Move it behind .home-section: */
    z-index: -1;
}
.videoContainer video {
    /* Make the video fill its parent: */
    width: 100%;
    height: 100%;
    /* Maintain aspect ratio: */
    object-fit: cover;
}

Keep in mind that the technique of stretching the video using object-fit may not be fully supported in all browsers. Depending on the level of browser compatibility required, you may need to consider alternative methods for scaling the video. I utilized this approach for its simplicity and efficiency.

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

If you press Ctrl + F, the browser will disable the form search function

How can I prevent the form find browser functionality when pressing Ctrl+F, and instead focus on the element html? <div id='demo'> <form class="id5-text-find-form" id="id5-text-find-form"> <input class="search" placeho ...

javascriptjqueryhtmlcssbrowser

Adjusting the spacing of the first letter using CSS, leave room

I'm encountering issues with the alignment of titles and text using the 'Lato' Google font. It seems like there is a space or kerning issue on the first letter causing them not to align properly to the left. Any suggestions on how to fix thi ...

htmlcssfontswebfonts

Ways to show alternative data from a database in Laravel 8

I am working on a project where I need to display additional data based on the option selected from a dropdown menu populated from a database. Can anyone guide me on how to achieve this using javascript or jquery? https://i.stack.imgur.com/k3WLl.png Belo ...

javascriptphphtmljquerylaravel

Adjust the size of the image within a designated container to decrease its proportions when there is an excess of text present

I am working on a project where I need to resize an image based on the available space within its container. When there is text in the description, the image should adjust its size accordingly without pushing the text upwards. I am using React for this pro ...

javascripthtmlcssreactjs

Issue with Angular JS: Unable to remove uploaded files

I'm currently learning about AngularJS and I've been working on uploading and deleting files. However, I've come across an issue with deleting files. Below is the HTML code: <div> <ul> <li ng-repeat="files in table.proce ...

jqueryhtmlangularjs

Unable to locate the tag using .find() function following the use of .attr() method

I am currently utilizing jQuery in conjunction with node-horseman to interact with a specific page. My approach involves referencing the page's data-id attribute, which I then pass to my application to search for the li element containing this attribu ...

javascriptjqueryhtml

Class Background Imagery

Currently leveraging Wpbakery for my website design. Seeking to apply the FadeInUp animation solely to the background image rather than the entire row. Any suggestions on accomplishing this? Is there a method to assign a class solely to the background i ...

csswordpress

Printing Apex Oracle reports using Internet Explorer

I am facing a challenge with printing my page that contains two interactive reports. To enable printing, I have utilized a JavaScript function that triggers window.print(). I have incorporated CSS to adjust the layout of my tables when printed. @media pr ...

javascriptcssoraclemediaoracle-apex

The ASP variable fails to display its value within the tags

I have the following code snippet that is part of a larger code base. <% dim rsFav sSQL = "(SELECT shorthand, display, larry_ranking, site_url FROM larrydb_site_list lsl JOIN larrydb_review lr on lsl.sid = lr.sid WHERE display=true AND niche=' ...

htmlasp-classic

retrieving dynamic data from an HTML form to JavaScript

Currently, I am dynamically adding elements using JavaScript. The count is defined and increases by one. <span style="margin-left:10px;">File Type : <select name="select_type_'+count+'" > <option value="select">Select</optio ...

javascripthtml

When running the function `.find('li')` on a `bs4.element.Tag` object, it returns None despite the presence of the <li> tag within the soup

As I work on parsing the content of a URL using BeautifulSoup after making a request with `requests.get()` (not displayed in the code), I am using the parser ""html.parser"". Below is a snippet from a larger script: print(f"subheading : {sub ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

How can I dynamically adjust the stroke length of an SVG circle using code?

In my design project, I utilized Inkscape to create a circle. With the fill turned off, only the stroke was visible. The starting point was set at 45 degrees and the ending point at 315 degrees. After rotating it 90 degrees, here is the final outcome. < ...

javascripthtmlsvg

Looking for a JavaScript code to create a text link that says "submit"?

Here is the code I have, where I want to utilize a hyperlink to submit my form: <form name="form_signup" id="form_signup" method="post" action="/" enctype="multipart/form-data"> ... <input type="submit" value="Go to Step 2" name="completed" /> ...

javascripthtmlforms

What could be causing the issue with HTML not being printed upon button click in ReactJS?

My goal is to display the word "Hello" on the screen when the add button is clicked. However, I am encountering an issue where it is not showing up. Any insights or solutions would be greatly appreciated! import React, { Component } from 'react'; ...

javascripthtmlreactjs

Reducing the size of CSS classes and IDs

I am searching for a way to automatically compress classes and ids in an .html file. This specific file is generated through a sequence of gulp commands. I attempted to use the Munch command line application, but it had adverse effects on the file by elimi ...

cssnode.jsgruntjsnpmgulp

What are the implications of sending a query for every individual input field alteration in a large online form?

I am creating a system for an educational institution where faculty can input scores using php and html. The layout is similar to an excel sheet, with 20 questions per student and about 60 students on each page. My dilemma is whether it's acceptable ...

phphtmlmysqldatabase

Issues with content overlapping within Bootstrap can arise when elements are

Struggling with my band website development using Bootstrap. Inexperienced in web design, I'm facing difficulties getting elements to align properly without slipping under each other. Looking for insights and suggestions on how to avoid manual CSS adj ...

jqueryhtmlcsstwitter-bootstrapfrontend

Is the fixed header see-through?

I have a query regarding my website design. Currently, the fixed header on my site is transparent and when I scroll down, the content overlaps the header. However, I want the header to remain above the content. Can anyone provide assistance with this issue ...

htmlcss

Utilize various CSS styles for individual sections within a multi-page website

Having a web page with multiple subpages each having their own specific CSS can be quite challenging. Sometimes, when all the CSS files are applied globally, they tend to mix with each other causing a headache for developers. One common approach is to decl ...

htmlcss

Issue in Chrome when using CSS clip property on nested div elements

Take a look at this fiddle Here is the HTML structure: <div class="parent"> <div class="child"></div> </div> This is the corresponding CSS code: .parent { position: absolute; width: 100px; height: 100px; background: re ...

htmlcssgoogle-chrome