Why is the video background not taking up the entire width of the div element?

I've recently integrated the jquery.videoBG plugin into my project to add a video background.

Here's the HTML code:

  <div id="div_demo">
    <div class="videoBG">
    <video autoplay="" src="media/snow.mp4" style="position: absolute; z-index: 0; top: 0px; left: 0px; min-width: 100%; width: 100%; height: 650px; loop">
    </video>
    </div>
  </div>

CSS:

#div_demo{
    position: relative;
    min-height: 650px;
}

Currently, I have set the video styles inline. However, I'm facing an issue where applying height to the video causes its width to shrink and become aligned in the center.

If I remove the height attribute from the video, it goes outside of the containing div.

jqueryhtmlcssbackgroundhtml5-video

Answer №1

Set the main div with a CSS property of position:relative;

Ensure your CSS includes:

position:absolute;
top:0;
left:0;
bottom:0;
right:0;

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

Typescript includes empty spaces in its duplicate-checking process

I have been working on removing duplicate values from an array using the following code: for (var i = 0; i < a.length; i++) obj[a[i]] = a[i] a = new Array(); // Checking each object with keys to remove duplicates. for (var key ...

htmlangulartypescript

Implementing dynamic classes for each level of ul li using JavaScript

Can anyone help me achieve the goal of assigning different classes to each ul li element in vanilla Javascript? I have attempted a solution using jQuery, but I need it done without using any libraries. Any assistance would be greatly appreciated! con ...

javascripthtmljquerytypescriptecmascript-6

How to format values in a textarea using AngularJS

Is there a way to address the following issue without replacing \n with other values? A user can input a description for something in a textarea and include line breaks. In the controller, there is a value called description which includes a string ...

javascripthtmlangularjs

Issue with CSS causing elements to display improperly within nested grids

I am facing an issue where I want to nest a grid within another grid, but the elements in the nested grid are not appearing in the order I desire. Specifically, I would like the "#classes" section to be at the bottom of the nested grid, but it remains stuc ...

csscss-grid

Is there a way to conceal the parent element when the child element is hidden from view?

Wanting to remove the stars badge in the review section of a Shopify store when there are 0 reviews for the product. The goal is to have the badge appear automatically once a review is received. Here's the code snippet: HTML <div class="spr- ...

htmljquerycssshopifyliquid

Verify if the date string includes the day

Here's the scenario: a user clicks on one of two links, either 2012/10, or 2012/10/15. I am extracting the day value from the link to pass it onto an AJAX request that will change days on an archive page. Is using a regular expression like /\d{ ...

phpjavascriptjquerydate

Utilize CSS to position my image in the center on mobile devices with responsive design

I am having an issue with the responsiveness of my logo image on my website's showcase section. Currently, the image is only showing up in the left corner on mobile devices, and I want it to be centered. Below is my HTML code: <section id="showca ...

htmlcssbootstrap-4

Avoiding the use of if statements in Javascript

I've recently started learning Javascript and I'm facing an issue with my code. I want to create a functionality where clicking on an image on one page redirects you to another page and shows a specific div based on the clicked image. To achieve ...

javascriptjqueryif-statement

Incorporate the "0" character into a PHP JSON call

I am currently working on a PHP page to retrieve data from Forecast.io's API. When looking at the daily view, they represent the days as numbers. I specifically need information for today, which is represented by the number "0." Here is an excerpt of ...

phphtmljsonparsing

The functionality of Ajax autocomplete with jQuery does not function properly when the text field contains existing text

Currently, I am utilizing Ajax autocomplete for jquery in my project. Below is the HTML code snippet I have implemented: <input type="text" name="autocomplete" id="globalBCCAutoComplete"> Furthermore, here is the JS code utilized for the autocomple ...

javascriptjqueryhtmlajaxautocomplete

JavaScript for Verifying Phone Numbers

After extensive research and tutorials, I am still unable to figure out what is going wrong with my work. I have a button that looks like this: Despite Stack Overflow causing some trouble for me, please ignore the missing class as it is there. This is no ...

javascripthtmlcss

Using JS to switch between text and state in ToneJS

I am facing an issue with the text not displaying in the "play-stop-toggle" element, despite my limited experience with JS. My desired outcome includes: [SOLVED] The text in <div id="play-stop-toggle" onclick="togglePlay()">Play ...

javascripthtmlcsstone.js

Having trouble locating elements with Selenium in Java?

I've been struggling to locate a particular WebElement using Selenium's API. I attempted to use a wildcard to capture all elements on the page and then iterated through them, but I'm still unable to locate the desired element. Could it possi ...

javahtmlseleniumweb

Utilize the identical button and modify the text displayed on it for implementing my jQuery function that toggles visibility

Is there a way to modify my current jQuery function for displaying and hiding a contact form using the same button? Currently, I have two buttons that toggle the visibility of the form: "Write me" shows the form on click and changes to "I don't want ...

jqueryhtml

Sending various types of data to an MVC C# controller using AJAX

Currently, I am utilizing AJAX to retrieve information from a Razor View and forward it to the controller. Although everything is functioning as expected, I now face the challenge of passing an array along with a string as the data: // View - JavaScript v ...

javascriptc#jqueryajaxasp.net-mvc

Change the code from a for-loop to use the Array#map method

I have been working on a simple JavaScript function and attempting to convert the code from using a for-loop to Array#map. I'm sharing my code in the following fiddle as I am currently learning about array map: http://jsfiddle.net/newtdms2/. function ...

javascriptjqueryhtmlangularjsbackbone.js

Automatically insert nested object keys and values from jQuery into their respective div elements

Below is a sample object that I am working with: "experience": { "1": { "jobtitle": "job_title", "companyname": "company_name", "companytown": "company_town", "companycountry": "company_country", "summary": "Sum ...

javascriptajaxjquery-uijquery

What are the steps for sending information to a PHP file and retrieving the outcome with AJAX?

Hey there! I'm looking to send data to PHP, receive the PHP result, and then display the result in an HTML div tag. Could you provide me with a sample code snippet for this? Thank you in advance and please excuse any mistakes in my English. ...

phphtmlajax

When invoking a function, jQuery may return an empty value

I am currently tweaking my jQuery script to retrieve a specific value upon page refresh in order to capture the return value. Initially, I attempted the following: var email_number = ''; // check if page refreshed or reloaded if (performance.n ...

javascriptphpjqueryajax

``Is there a way to position an image at the center in Python dash?

Can someone help me with centering an image in my Flask dash app? Here is the code I have: import dash from dash import html, dcc import dash_bootstrap_components as dbc app = dash.Dash(__name__) app.layout = html.Div([ dbc.CardImg(src=r'assets/ ...

pythoncssbootstrap-4plotly-dash