Issues with scaling background videos in HTML5

I'm having trouble making a video scale properly with the browser window while still covering the entire area. Does anyone know why my current approach isn't working?

HTML: 

<div class="bgVideoWrap">
<video id="bgVideo" loop="true" autoplay="true" >
    <source src="video/bgVideos/Speak_BG.webm" type="video/webm"></source>
</video>
</div>

CSS:

#bgVideo {
    height: auto;
    width: auto;
    min-width: 100%;
    min-height: 100%;
}

.bgVideoWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ff0000;
    z-index: -1000;
    overflow: hidden;
}

html, body  {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 1;
}
csshtml

Answer №1

-DEMO-

Apply background-size: cover; to the .bgVideoWrap class and set opacity: 0.6; for the #bgVideo element.

MARKUP:

<div class=bgVideoWrap>
<video id=bgVideo loop autoplay poster=http://media.w3.org/2010/05/bunny/poster.png>
    <source src=http://media.w3.org/2010/05/bunny/movie.mp4 type=video/mp4>
    <source src=http://media.w3.org/2010/05/sintel/trailer.ogv type=video/ogg>
     <p>Your user agent does not support the HTML5 Video element.</p>
</video>
</div>

STYLE:

html, body  {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    line-height: 1;
}

#bgVideo {
    height: auto;
    width: auto;
    opacity: 0.6;    /*Set opacity*/
    min-width: 100%;
    min-height: 100%;
}
.bgVideoWrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1000;
    overflow: hidden;
    background: #333 url("http://aimg.disneystore.com/content/ds/skyway/2012/category/full/cp_FWB_Brave_20120926.jpg") no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

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

Initiating an audio call exclusively via SimpleWebRTC

I'm currently utilizing a jQuery plugin for WebRTC found here. My goal is to initiate an audio call only, but I am struggling to find a function within the plugin that allows for this. The code snippet I am using with autoRequestMedia set to false is ...

javascriptjqueryhtmlwebrtchtml5-audio

Multiplication cannot be performed on operands of type 'NoneType'

Hello everyone, I am attempting to calculate the unit price and quantity from this table using the following model: class Marketers(models.Model): category =models.ForeignKey(Category, on_delete=models.CASCADE, null=True) name =models.CharField(max ...

javascripthtmlcssdjangobootstrap-4

Is there a way to showcase every published WordPress page in a drop-down menu?

I am having trouble displaying all the published pages within my WordPress site as a dropdown list. Here is the code I have attempted to use: <div class="header-right"> <?php $pages = get_pages(); $posts = get_pages(array( ...

phphtmldatabasewordpresswordpress-theming

Creating Table Rows on-the-fly

Seeking assistance and guidance from the community, I have modified code from an online tutorial to allow users to dynamically add rows to a table when data is entered in the row above. However, I am facing an issue where I can only insert one additional ...

javascripthtml

Having difficulty creating a shadow beneath a canvas displaying Vega charts

I'm looking to create a floating effect for my chart by adding shadows to the canvas element that holds it. Despite trying various methods, I can't seem to get the shadow effect to work. Here is the code snippet I have for adding shadows: <sc ...

javascripthtmlcsscanvas

LinkedIn's website consistently displays a "1 min read" indicator when sharing articles or

I am currently attempting to remove the '1 min read' text from the description when sharing content on LinkedIn. Example of '1 min read' Although I have added open graph tags to the page and confirmed that they do not contain '1 ...

htmllinkedin-apimetashare-open-graph

What is the best way to generate a personalized error message when an HTML5 required input pattern fails to meet the criteria?

I am facing an issue with the following code snippet: <input required pattern=".{6,}" class="big medium-margin" name="Password" placeholder="Password" size="25" type="password" /> After entering just one character, I receive a message that says: " ...

html

Show data from a Mysql table column in a dropdown menu

I am trying to show the values from a MySQL table field in a select box. I attempted the code below but it only displays the specified field values in the echo function and not in the select box. I'm unsure where I made a mistake. $con = mysql_conne ...

phphtmlmysql

Animate the background of a table cell (td) in React whenever a prop is updated

I have a dynamic table that receives data from props. I would like the background animation of each cell (td) to change every time it receives new props. I've tried creating an animation for the background to indicate when a cell is updated, but it on ...

cssreactjsanimation

A guide to examining the HTTP response body, including HTML content, using Wireshark

After entering the URL in the address bar of the virtual machine's browser, a request for an HTML document from my host computer was made. The HTML document, which I had personally written, successfully appeared in the virtual machine's browser. ...

htmlhttpnetworkingwiresharkpcap

How can I align a div in a vertical manner if it is displayed as a circle?

This is the creation I have come up with: This is the design I am aiming for: Below is the code I have written: <div id="OR"><span style=" vertical-align: middle;background:blue;">OR</span></div> Here is the corresponding CSS: ...

htmlcsscss-positionvertical-alignment

Hover effect transition malfunctioning

I've been attempting to incorporate a hover image effect on my website. I included the script in the link below. However, I'm struggling to achieve a smooth fade transition and a 2-second delay on the hover image. Can someone please assist me wit ...

htmlcss

The transition feature is not functioning properly in Firefox

I have a basic HTML and CSS setup below. It seems to be working fine in Chrome, but I'm having trouble with the transition effect in Firefox. I am currently using Firefox version 18. I tried looking up solutions on Google and Stack Overflow, but none ...

htmlcsscss-transitionstransition

Checking if the group of radio buttons has been selected using JQUERY

Need help with validating a group of radio buttons. If none are checked, display an error message in the span element to prompt users to select an option. The strange issue I am facing is that the validation code works only when placed below the radio butt ...

javascriptjqueryhtml

Tips on setting the default sorting order in AngularJS

I have implemented a custom order function in my controller with the following code: $scope.customOrder = function (item) { var empStatus = item.empState; switch (empStatus) { case 'Working': return 1; case & ...

javascriptjqueryhtmlangularjs

Attempting to style text during extraction from webpage source code

I'm facing some challenges with formatting the album title and artist name from a lyrics website while working on counting words in a song. An example of what's been troubling me is shown below: The desired format is as follows: Album Title: [A ...

pythonhtmlbeautifulsoup

When attempting to add a new row to a table, the function fails to function properly

I am facing an issue with my dynamic HTML table. Each row in the table should have two cells whose values are multiplied together. I have created a function to achieve this, but it only works on the first row of the table and not on any new rows added by c ...

javascriptjqueryhtml

Is it feasible to preserve the HTML form content data even after refreshing the page?

Can someone offer a suggestion that doesn't involve using Ajax? I'm wondering if there is a way to achieve this using JavaScript/jQuery or some other method. Here's my issue: When submitting a page, the action class redirects back to the sa ...

javascriptjqueryhtmlcss

Tips for assigning a class to a div based on the route in Angular

In my angular template, I have a basic ng-repeat with some div elements. Now, I am looking to add a class to a specific div if the $routeParams.userId matches the id of the object in the loop. You can refer to the second line of code below for clarificatio ...

javascripthtmlcssangularjstemplates

The use of DIV tags allows the element to be displayed in an inline

In my project, I decided to add three div tags. The first two are positioned next to each other with the third div tag placed below them. However, when I tried to insert a slideshow into the first div tag, all of the div tags ended up displaying as "block" ...

javascriptjqueryhtmlcssinline