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

Do you think it's achievable to modify the color using CSS's order attribute?

When I look at the code in Firefox's inspector, I notice this : element { order:35; } Can a color be assigned to it? I am customizing my year outlook calendar and have set a particular day to display in a different color. But when I click on the mo ...

htmlcsstags

Bootstrap Model Footer Button Alignment

click hereI'm facing an issue while adding buttons to the model footer. The buttons are not aligning in line, instead they move to the next line. <div class="modal-footer"> <form method="post" action="admin_view"> ...

phphtmlcsstwitter-bootstrap

What is preventing my boolean from being altered?

Creating a basic calculator that can handle single-digit arithmetic. The current code is incomplete and redundant, so please avoid commenting on that. <!doctype html> <html> <head> <title>JavaScript Learning Zone</title> ...

javascripthtmlboolean

Troubleshooting Vue.js and Laravel: Having trouble loading new image files, while the older ones load just fine

Currently, I am working on a project that involves Vue.js and Laravel. In this setup, Vue is located inside the resources/js directory of the Laravel project. My current issue revolves around loading an image from the resources/js/assets directory. While ...

javascripthtmllaravelvue.js

Conceal the message "Table does not contain any data" if data exists in the table

This table is populated with data retrieved via JSON. Here is the structure: <table id="tblClaimSearch" class="display responsive nowrap" cellspacing="0" width="100%"> <thead> <tr> <th><input type="checkbox" ...

javascriptjqueryhtml

Adjusting the Direction of Flex Components

As someone who is new to css and html design, I recently started using flex in my bootstrap designs. My goal was to have the components sorted from left to right direction, similar to how it's done on this site. Now, I am looking to shrink the slider ...

htmlcssflexboxcarousel

The largest contentful paint is anticipating an unidentified event

My website is encountering issues with Google Pagespeed and I'm unsure of the cause. The primary bottleneck appears to be the LCP time, which Google reports as taking between 7 and 11 seconds during each test. Upon analyzing the waterfall chart, it ...

javascripthtmlcsspagespeed-insights

What's the best way to place the text or operator from a button into an input field?

Hello, I am currently working on developing a calculator. However, I have encountered an issue where clicking on operator buttons such as +, -, /, *, and the dot button does not add them to my input field. Additionally, when these buttons are clicked, the ...

javascripthtmlcss

Issue with Z-index and wmode when using YouTube embed code on IE10

I am currently working on developing a div element that will prevent a YouTube video embedded in an iframe from playing when clicked. Instead, I want to trigger a JavaScript function upon user interaction. I have added the wmode=opaque parameter to the src ...

javascripthtmlcssyoutubewmode

Assign the input text field's value programmatically in the code-behind of a C# Asp.net application

I am attempting to change the value of an HTML input field from C# code behind. These inputs are created through a JavaScript loop, so I have not had much success using run at server or assigning values through <%= %>. Below is my script: var mytab ...

javascriptc#jqueryasp.nethtml

Ways to induce scrolling in an overflow-y container

Is there a way to create an offset scroll within a div that contains a list generated by ngFor? I attempted the following on the div with overflow-y: @ViewChild('list') listRef: ElementRef; Then, upon clicking, I tried implementing this with s ...

javascripthtmlangulartypescriptngfor

Using SVG Mask to enhance shape Fill

I am having trouble achieving the desired effect of darkening the fill of objects based on a specified gradient. Instead, when the mask is applied over the fill, it actually lightens it. I suspect that this issue arises from the color blending method being ...

javascriptcsssvg

Issue with the positioning of bootstrap popover after content is added

Having trouble writing a function that adds a textarea to the bottom of a popover content when clicking on a button. The issue is that once the textarea is displayed, the popover extends downward and obscures the text. I'm looking for a solution where ...

javascriptjqueryhtmlcsstwitter-bootstrap

Rapid processing of JavaScript upon page load

I recently implemented a dark mode feature on my WordPress site. Here are the four modes I included: 1- Automatically based on user's system settings 2- Light mode 3- Semi-lit mode 4- Dark mode The implementation is in place and functioning perf ...

javascriptjquerycss

Verify the input in text fields and checkboxes using JavaScript

I'm in the process of creating a complete "validate-form" function, but there are still a couple of things missing: Ensuring that the Name field only allows alphabetical characters and white spaces Validating that at least one checkbox is selected, ...

javascriptjqueryhtmlvalidationcheckbox

What is the best way to add a line next to a specific word in a

For my report, I need to create multiple lines with automated dashes without having to use the SHIFT plus underscore keyboard shortcut. I searched for a solution but couldn't find anything that addressed my specific issue. I envision something like t ...

htmlcss

No data being fetched through Ajax

I am facing an issue with retrieving PHP data in the form of an array. I have created an AJAX query to display data in two divs: one is a drop-down and the second is where all data will be shown. However, the problem is that when I attempt to do this, all ...

javascriptphpjqueryhtmlajax

Navigating through a modal without affecting the main page's scroll position

My webpage has some content, and I also have a modal that pops up on top of it. The problem I'm facing is that when I try to scroll the contents within the modal, only the contents behind it scroll instead. Below is the CSS code: html, body { b ...

htmlcssmodal-dialog

Utilizing JavaScript, HTML, and CSS to incorporate images within circular frames

After finding inspiration from this question about rotating objects around a circle using CSS, I decided to modify the code to include images of Earth orbiting the Sun. The challenge was to make one image orbit another like a planet circling its star. Ear ...

javascripthtmlcss

Determine the DOM element that corresponds to a right-click action

I utilized the code snippet below to construct a personalized context menu: <script type="text/javascript"> $(document).ready(function() { var x, y; document.oncontextmenu = function(e) { e.preventDefault(); x = e.clientX; ...

javascriptjqueryhtmlcontextmenu