I'm building a website that has an autoplaying video as the hero element, and I currently have the video set to the following css:
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto !important;
height: auto !important;
z-index: -100;
}
The purpose of which is to allow it to be full width. The fixed position is needed because the content below the video needs to be able to scroll over the video.
Unfortunately, even with the negative z-index, the video prevents you from clicking on content further down the page. It's still overlaying everything. When I right click anywhere the play, pause, unmute, etc. controls come up.
Not really sure how to keep this from happening. I've tried to play around with some of the settings, but anything (that I've tried, at least) that makes it full width ends up causing it to overlay everything.
Here's the html:
<video autoplay="" loop="" id="video-background" muted="" style="width: 100%; height: 100%;">
<source src="http://beta.mattgrossdesign.com/sites/default/files/wood%20autumn-HD.mp4" type="video/mp4">
</video>
EDIT: Solved it with a little help from a coworker. Here's the CSS:
div#layer_slider_1 {
height: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
div#after_layer_slider_1 {
margin-top: 800px;
}
div#layer_slider_1 is the parent div. The div#after_layer_slider_1 is obviously the div right after it.
Thanks for the input.
Add this CSS property
html, body {
width:100%;
height:100%;
}
Solved it with a little help from a coworker. Here's the CSS:
div#layer_slider_1 {
height: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 0;
}
div#after_layer_slider_1 {
margin-top: 800px;
}
div#layer_slider_1 is the parent div. The div#after_layer_slider_1 is obviously the div right after it. Needed to make the div below it overlay the video in order to avoid it from covering the whole page, even with the z-index.
Thanks for the input.
Related
I have been customising this existing Bootstrap based website template to create my own website.
I have changed the header to have a full width video background instead of a static image using the following HTML and CSS:
<!------------- Background Video ----------------->
<div class = "video-container">
<video preload = "true" autoplay = "autoplay" loop= "loop" volume = "0" poster = "bokeh.jpg">
<source src = "video/bokeh.mp4" type = "video/mp4">
<source src = "video/bokeh.webm" type = "video/webm">
</video>
</div>
CSS
.video-container{
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
line-height: 0;
}
video{
position: relative;
z-index: -1;
opacity: 0.78;
width: 100%;
margin: auto;
object-fit: cover;
min-width: 100%;
min-height: 100%;
}
After adding this video, a section of the website near the bottom of the page What Our Clients Say does not render properly. I am sure it's a browser rendering issue because it renders differently each time you reload or scroll the page, various chunks of white space.
Here are two screenshots to show you the kind of rendering problem I'm having - this is on two separate reloads:
I have tried reducing the resolution of the video down to 360p but this has not helped. As soon as I remove the video, the rendering issue goes away.
Any ideas?!
Please try removing the z-index:
.video-container{
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
line-height: 0;
}
video{
position: relative;
opacity: 0.78;
width: 100%;
margin: auto;
object-fit: cover;
min-width: 100%;
min-height: 100%;
}
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
http://www.w3schools.com/cssref/pr_pos_z-index.asp
Using Bootstrap 3 I have managed to get a respinsive video working on my homepage, you can see it working here: http://www.infiniteideamedia.com/test/ The only issue I'm having with it is that on devices smaller than video width (1280px) the video is cut off on only 1 side. I would prefer it kept the video center and cut the video off both sides. Is this possible? Its the same issue with poster which is shown instead on iOS devices instead of the video. Here's the code in place at the moment:
HTML:
<div id="vid">
<video autoplay loop poster="img/Poster.jpg">
<source src="img/homevideo.webm" type="video/webm"/>
<source src="img/homevideo.mp4" type="video/mp4"/>
</video>
</div>
CSS:
#vid
{
position:absolute;
height:100%;
width:100%;
overflow: hidden;
}
#vid video {
width:auto;
min-width:100%;
height:auto;
min-height:500px;
}
I've come to the conclusion that I might need to use an JS alternative, any tips on how to implement that would be great.
After a bit research, another post on here actually. Doing this does what I need:
position: absolute;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
Doing what you propose, I've never seen it unless it's a background image. Under the size where it it starts going left, you can use responsive embedding. Otherwise, there's a lot of math, you'd essentially have to pick some min-widths or max-widths and start positioning the #vid outside the viewport but by how much would have to be guessed.
DEMO: https://jsbin.com/zowuze/1/
#vid {
position: relative;
padding-bottom: 40%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
#vid video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-width:1280px) {
#vid {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
padding: 0;
height:500px;
}
#vid video {
width: auto;
min-width: 100%;
height: auto;
position: static;
}
}
I have a slight issue. I have a video which I would like to adjust to the browser, it shouldn't stretch, but neither should there be any with space visible
HTML:
<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>
CSS:
#wereldbol {
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
background-size:cover;
}
background-size: cover; is causing the issue that the video would be off-center, is there any alternative way to cover the browser's full width and height? At the moment width: 100% and height: 100% don't quite fix the issue because it would leave the image to have a white bar on the left and right, eventhough the video scales correctly. Is there any way to fix this issue?
If I understand you correctly, what you are trying to achieve is keep the video’s aspect ratio, but make it adapt to its surroundings without stretching the video out of proportion. Here’s how I do it:
Wrap the video element in a div, like this:
<div class="video-wrapper">
<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>
</div>
Then use the following CSS:
.video-wrapper {
position: relative;
width: 100%;
max-width: 100%;
height: 0;
padding: 56.25% 0 0 0; /* 100%/16*9 = 56.25% = Aspect ratio 16:9 */
overflow: hidden;
border: 0;
}
.video-wrapper video {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
EDIT: Here’s a plunker: Adjust the viewport-width to see how it works.
You need to either adjust the CSS to fit the exact aspect-ratio using the "aspect ratio trick" or use something like FitVids.js -- see http://fitvidsjs.com/
I have a div in which i want to add Video in the background just like the image but i am not getting how to do it..Here is the CSS where i want to add the video..
.page-section {
width: 100%;
min-height: 800px;
padding: 50px 0;
border-bottom: 2px solid #fff;
}
.page-section#intro {
min-height: 400px;
}
and here is the HTML Div..
<div class="page-section">
</div>
I have tried to add video like this but its not working..
.page-section#intro {
min-height: 400px;
background: url(Video/Sapno.MP4) bottom center no-repeat;
}
Please help me to add the video from css into the background of Div..
#Hansal, I don't think the background property accepts videos as valid urls. They can only take bitmaps, SVG images, colors and gradients as values – it is possible to fake the appearance of a background video by forcing it behind other HTML elements. There is a propery called z-index which takes care of the 'depth' of elements on the page.
You could try something like this (simple video tag in HTML5):
<video autoplay loop poster="foobar.jpg" id="bgvid">
<source src="foobar.webm" type="video/webm">
</video>
You could style the video tag like this:
video#bgvid {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background: url(foobar.jpg) no-repeat;
}
Here, the essential part of the css is setting the z-index of this element to -100 which ensures it stays in the background allowing other elements to come on top of it. You could try a similar approach with your corresponding html elements. Hope it helps.
Try it.
DEMO
.page-section video{
position: fixed;
right: 0;
bottom: 0;
top:0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background-size: cover;
}
I am tying to have a video tag to fill 100% of a div:
a) it doesn't need to keep the ratios(otherwise we need to use the overflow:none);
b) fill a div, not the whole background;
c) it would be a plus to be responsible. Now it is as long as you re-size window diagonally. Keeping height and re-sizing horizontally cuts the video.
I have tried dozens if not hundreds of alternative, and all of them keep the initial video ratio.
it works in the fidlle .... maybe because the screen is small, maybe because fiddle is a better browser...
<body>
<div class="wrapper">
<div class="header">
.....
</div>
<div class="out-video">
<video autoplay loop poster="mel.jpg" id="bgvid" width="100%" height="100%">
<source src="http://www.mysite.braaasil.com/video/mel.webm" type="video/webm">
<source src="http://www.mysite.braaasil.com/video/mel.mp4" type="video/mp4">
</video>
</div>
</div>
The site is here but as I try the solutions, it will change... There is a right and left sidebar empty. I would like the video to fill the whole width. When it covers the div, the height change and the video does not show in full. I would like something like the background-size 100% 100% that stretches the images to the end of the div, but it does not work for video.
Thank you for any suggestion in advance.
PS. It seems that android family does not play the video!
l
Use object-fit css property, though there is no support for IE, but it's still quite reasonable to be used for <video>, <img> tags.
Check CanIUse for Browser Support, and CSS-Tricks for usage.
Example:
/** If parent has some defined width/height */
.video-element {
width: 100%;
height: 100%;
object-fit: cover;
}
You can use a solution like this one. Ratio dont change, but you may lose the right part of the video.
video#bgvid {
position: absolute;
z-index: 0;
background: url(mel.jpg) no-repeat;
background-size: 100% 100%;
top: 0px;
left: 0px; /* fixed to left. Replace it by right if you want.*/
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
The video will be fix to top left corner. If you want to improve it, I think you will need some JavaScript.
Edit :
Just a find a solution with JQuery who can fit your need : simulate background-size:cover on <video> or <img>
Demo
Simple CSS inheit
video {
width: inherit;
height: inherit;
}
div {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
}
Try this
HTML:
<div id="MainBanner">
<video autoplay muted loop>
<source src="something-nice.mp4" type="video/mp4">
</video>
<div class="content">
<h1>Heading</h1>
<p>Some Content</p>
</div>
</div>
Less:
#MainBanner {
position: relative;
height: 100vh;
overflow: hidden;
video {
background: url(cover.jpg) no-repeat;
top: 0px;
left: 0px;
min-width: 100%;
min-height: 100%;
}
.content {
position: absolute;
padding: 20px;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
}
}