How can you display HTML5 <video> as a full screen background to your website? Similar to this Flash site demo...
http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617
Use position:fixed on the video, set it to 100% width/height, and put a negative z-index on it so it appears behind everything.
If you look at VideoJS, the controls are just html elements sitting on top of the video, using z-index to make sure they're above.
HTML
<video id="video_background" src="video.mp4" autoplay>
(Add webm and ogg sources to support more browsers)
CSS
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
It'll work in most HTML5 browsers, but probably not iPhone/iPad, where the video needs to be activated, and doesn't like elements over it.
I might be a bit late to answer this but this will be useful for new people looking for this answer.
The answers above are good, but to have a perfect video background you have to check at the aspect ratio as the video might cut or the canvas around get deformed when resizing the screen or using it on different screen sizes.
I got into this issue not long ago and I found the solution using media queries.
Here is a tutorial that I wrote on how to create a Fullscreen Video Background with only CSS
I will add the code here as well:
HTML:
<div class="videoBgWrapper">
<video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
<source src="videosfolder/video.webm" type="video/webm">
<source src="videosfolder/video.mp4" type="video/mp4">
<source src="videosfolder/video.ogv" type="video/ogg">
</video>
</div>
CSS:
.videoBgWrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.videoBg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-aspect-ratio: 16/9) {
.videoBg{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9) {
.videoBg {
width: auto;
height: 100%;
}
}
I hope you find it useful.
Just a comment on this - I've used HTML5 video for a full-screen background and it works a treat - but make sure to use either Height:100% and width:auto or the other way around - to ensure you keep aspect ratio.
As for Ipads -you can (apparently) do this, by having a hidden and then forcing the click event to fire, and having the function of the click event kick off the Load/Play().
P.s - this shouldn't require any plugins and can be done with minimal JS - If you're targeting any mobile device (I would assume you might be..) staying away from any such framework is the way forward.
Related
I have a very specific scenario which I spent a decent amount of time replicating in an MCVE. As far as I can tell, these are the requirements:
Something on the page animates using the standard CSS transition property (not transform)
The HTML5 video has a poster that I provide with a url (the video still generates its own poster from the first frame anyway)
The video is absolutely positioned (used to hack a scaleable ratio)
I'm using Chrome 50 on Mac OS, but this issue has been duplicated on Windows. It does not appear to be an issue in Firefox or Safari on Mac OS.
Here is a JSFiddle illustrating the problem. Notice how when you hover over the div that says "Hover," the video switches between my poster and its own auto-generated poster. This only appears to occur before the video is played.
.anim {
width: 50px;
height: 50px;
background: grey;
transition: all 0.2s linear;
transform: rotate(0deg);
color: white;
display: flex;
align-items: center;
justify-content:center;
}
.anim:hover {
background: black;
transition: all 0.2s linear;
transform: rotate(90deg);
}
#video-container {
position: relative;
height: 0px;
padding-bottom: 56.25%; /* 16 x 9 */
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="box" class="anim">
<div>
Hover
</div>
</div>
<div id="video-container">
<video controls poster="https://pbs.twimg.com/profile_images/447374371917922304/P4BzupWu.jpeg">
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm">
</video>
</div>
Why is this happening? If I can't easily fix this, what would be the best way to maintain the scaleable aspect ratio of a video on a page that has a CSS transition?
Such situations with transitions/translates on page you can very often resolve using "magic" transform: translateZ(0) for parent or children elements (depends on situation).
In your case it is enough to add this transform to the #video-container:
#video-container {
position: relative;
height: 0px;
padding-bottom: 56.25%; /* 16 x 9 */
transform: translateZ(0);
}
Applied solution jsFiddle
This appears to be a bug in Chrome. I have submitted a Chromium bug report (Issue 617642) in hopes that it will be fixed.
In the meantime, I discovered that this issue only occurs if the element with the transition effect appears earlier in the HTML than the video. Using flex-direction: row-reverse or flex-direction: column-reverse I can switch the order of some elements in the HTML and again in the CSS so they appear in the right place but the transition does not affect the video thumbnail.
UPDATE: As of Chrome 77, this issue appears to be fixed.
I am using this method to make a video fluid
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
> iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
When I try to add a maximum width
maxwidth: 400px;
I am getting a black padding on the top and button of the video, how can avoid this ?
My question is how can I set a maximum width without getting the black padding ?
Set the width to 100% as mentioned in the article, and change the height based on the ratio of the video you've embedded and the width of the window.
This is also in the article (third section)...
(OR your question was about something else, in this case sorry for misunderstanding)
Use auto for height, then:
(When running code snippet below, select Full page, then resize browser window to see the effect)
video {
width : 100%;
height : auto; /* will retain aspect ratio of initial size */
max-width: 400px;
}
<video muted autoplay="true">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg">
</video>
I'm trying to figure out why Safari won't read the max-height attribute of its parent as the height. Both Chrome and Firefox will read it correctly, but Safari seems to ignore the parent's max-height and instead grabs the page's full height.
You can see it here
CSS:
body, html {
height: 100%;
margin: 0;
}
div {
height: 100%;
max-height: 300px;
width: 100px;
}
div span {
background: #f0f;
display: block;
height: 100%;
}
Markup:
<div>
<span></span>
</div>
I'm using Safari 6.0.5 on OSX 10.8.5.
This issue happens due to a reported bug in Webkit:
Bug 26559 - When a block's height is determined by min-height/max-height, children with percentage heights are sized incorrectly
This seems to be fixed for Chrome by now, but not for Safari.
The only non-JavaScript workaround that worked for me, is using an absolute positioning on the parent element:
div {
position: absolute;
}
Demo
Try before buy
Similar problem appears on Safari if parent element uses flexbox properties - container won't take 100% of the height.
Another solution (besides position: absolute;) would be to use vh (viewport height) units:
div {
height: 100vh;
}
I've made a absolutely positioned that starts centered horizontally with width=0 that expands to both sides of the page using .animate(). The effect works as intended in Firefox, Opera, and IE, but Chrome and Safari surprisingly both move the div to the left of the page (almost left=0) before expanding it to 100%. I cannot understand why; I must be missing something. Any suggestions to save my sanity will be forever appreciated..
#panel { position: absolute; top: 110px; bottom: 240px !important; min-height: 200px; width: 0; left: 50%; }
$('#panel').animate({'left': '0', 'width': '100%'}, 750);
I had the same problem but now it is working fine. It is fixed in the latest version of jquery.
You just have to take the latest version of jquery 1.4.3. and replace it
http://code.jquery.com/jquery-1.4.3.js
I'm attempting to use CSS3's resize to make an absolutely positioned div resizable in Safari and Firefox Beta. No matter what I do I can't seem to make it work – are there situations that resize cannot be used?
In order for it to work in Safari, it seems to need overflow:auto applied to the div.
Additionally, the display height and width of the div will act as min-height and min-width.
This only worked for me in Safari, not in Firefox 3.5.
<div id="box"> Nice box </div>
CSS:
#box {
/* important */
resize: both;
overflow: auto;
/* Styling */
background: red;
position: absolute; /* per the question */
top: 50px;
left: 50px;
width: 300px
}