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.

https://i.sstatic.net/DCzWy.jpg

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

https://i.sstatic.net/9xCqs.jpg

.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

Echo command fails to work with location.href

I am facing a small issue with my PHP echo. I have a JavaScript link function that is not working because the HTML code shows this type of link onclick="location.href="http://www.link.com/";". It's clear that this syntax won't work. However, if w ...

javascriptphpjqueryhtml

JavaScript for rotating an element upon button click

My webpage design <div id="yabanner"> <img src="img/ok.jpg"> </div> <button>Click Me</button> <button>Click Me</button> <button>Click Me</button> My script code var button = document.getElementsBy ...

javascripthtmldom

Guide on excluding certain words within a paragraph using PHP

In my database, there is a paragraph that looks like this: $str ="this is a paragraph i show shortly and when i click on the view more it will show completely for that i am using the ajax and retrieve it " I display it as follows: this is a paragrap ...

phpjavascriptmysqlhtmlcss

Choose each day's time slot on the jQuery FullCalendar version 2.x

The code snippet below is a segment of the code generated by the FullCalendar jQuery plugin version 2. It has undergone some changes from version 1.x in terms of the classes it utilizes. <div class="fc-slats"> <table> <tbody> ...

javascriptjquerycssfullcalendar

Should the max-height transition be set from 0 to automatically adjust or to none?

I'm dealing with an element that has a max-height of 0, and I want to smoothly transition it to either no max-height, auto, or none; essentially allowing it to expand based on the number of elements inside. I prefer not to use JavaScript or flex at th ...

csscss-transitions

Enhance your AngularJS skills by incorporating multiple conditions into the ternary operations of ng-class

I am struggling to apply multiple classes when the condition in the ng-class attribute evaluates to true. Here is the code I have attempted so far, but it doesn't seem to be working: <div class="col-md-4" ng-mouseover="hoverButton=true" id="plai ...

javascriptcssangularjsternary-operatorng-class

Translucent" outline for an "opaque" object

Consider the following HTML snippet: <div id="my_div"> </div> Now, let's take a look at the CSS code: #my_div { width: 100px; height: 100px; background-color: #0f0; op ...

htmlcss

Top div click causes bottom div to slide

I'm currently working on a project that involves using CSS and jQuery, but I've encountered an issue that I haven't been able to solve. Here is the demo link: . When the second div is clicked, why does the third div slide? How can this prob ...

jquerycss

"Adding jQuery functionality: displaying images in a popup on the same

Greetings to everyone here, it's my first time posting but I've been following some posts from time to time. So, hello all! I have a quick question that I haven't been able to find the answer for online. I'm dismantling a template to u ...

jqueryhtmlcss

Creating a hover effect for a div in jQuery or CSS: Keeping the div visible even when hovered

I have two divs in my layout: one is titled "title" and the other is called "description". I successfully made the description div appear when hovering over the title div. You can see an example of this behavior in action on this fiddle Now, I want to cha ...

javascriptjqueryhtmlcssshow-hide

Transitioning classes in Vue elements

Is it achievable to create a smooth transition between two CSS classes with different background images? That's the challenge I'm currently facing. Here is the Vue code snippet I am working on: <div id="flip-list-demo" class="demo"> & ...

javascriptcssvue.jstransition

How can I prevent opening duplicate tabs of the same website simultaneously?

Is there a way to prevent users from accessing the same website page from multiple tabs? Could this be accomplished using JavaScript? ...

javascriptphphtml

Generating an HTML table using an array retrieved from a PHP execute_db function, displaying repeated entries

My goal is to dynamically populate an HTML table with data retrieved from a SQL query. The structure of the table, including headings, should adjust based on user selections, reflecting the results of the query. While searching for a solution, I came acros ...

phphtmlarrays

Ways to create auto-suggest recommendations that exceed the boundaries of the dialogue container

Is there a way to position autosuggest suggestions above the dialog instead of within it, in order to prevent scrolling of dialog content? Check out this sandbox example for reference: https://codesandbox.io/embed/adoring-bogdan-pkou8 ...

javascriptcssreactjsmaterial-uiautosuggest

Ways to showcase information from an angular service

I'm struggling with displaying data from a service in my HTML view using AngularJS. My goal is to show a list of submitted forms called Occurrences in the view. When clicking on a list item, I want to be able to view all the data fields submitted thro ...

javascripthtmlangularjsservicecontroller

Apply CSS to every other div using a CSS selector

Struggling with selecting specific divs in CSS. Snippet of my code: <div class="card"> <div class="test">Asdasdasd</div> </div> <div class="card"> <div class="test">Asdasdasd</div> </div> <div class= ...

htmlcsscss-selectors

When initializing a new instance of Stripe using cartalyst/stripe-laravel, an error occurs stating "The Stripe API key has not been properly defined!"

I am eager to explore Stripe and learn how to process payments. Currently, I am utilizing the cartalyst/stripe-laravel package to create a new instance of Stripe following the instructions provided here. The code snippet should resemble this: $stripe = ...

phphtmllaravelstripe-payments

How to customize the page background color in Next JS

I am currently working on a project using Next Js and have encountered an issue. I have a global.css file set up in the project, but I need to change the background color of a specific page without affecting the rest of the project. Although I have tried u ...

cssnext.js

What is the reason that when a <div> click on a mobile device includes a jQuery ('#item').fadeOut() function, the CSS of the '#item' element maintains its previous hover state

While creating a mock back to top button, I encountered an issue with my jQuery call to fadeOut() behaving differently on mobile devices (this discrepancy can be observed using any desktop browser simulator). You can find the source code here: https://cod ...

javascriptjqueryhtmlcssmobile

Tips for organizing the data you have collected from the table

After successfully printing all the data from my database, I am facing a challenge in designing my data effectively. The table I am working with is called post_tbl and it has columns named post_id, post_message, and post_date. This is the query I am usin ...

phphtmlcss