Responsive video element

[FrickenTrevor]

I have a video that is set as a background. However when the page is resized the video does not resize with the rest of the page. I am trying to stick with just CSS for now, but I have looked into using jQuery to do this.

Here is the page (http://ctec.clark.edu/~t.reece/countdown/) that I am having problems with

[Beverleyh]

I think this will be the closest you can get with CSS alone - just add this to your stylesheet;
video {
max-width: 100%;
max-height: 100%;
}
video:after {
content: " ";
display: block;
width: 100%;
padding-top: 56.25%; /* 9:16 ratio */
}

For reference, this is using method 2 from my 3 Ways to Resize/Scale Web Images in Responsive Design (http://www.dynamicdrive.com/forums/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-Design) blog post.

Hope that helps

[FrickenTrevor]

It works, but there is whitespace to the right of the video. Then when the page is resized there is whitespace below the video. This is what I did:



html, body{
overflow: hidden;
height: 100%;
width: 100%;
font-size: 14px;
}


video:after {
content: " ";
display: block;
width: 100%;
padding-top: 56.25%; /* 9:16 ratio */
}


video {
position: absolute;
top: 0;
z-index: -100;
background: url(poster.jpg) no-repeat;
background-size: 100% 100%;
max-width: 100%;
max-height: 100%;
}

[Beverleyh]

With the 100% min width/heights, it should be centered too.

But yes, the space around the edges is due to aspect ratio being maintained within an unknown container size. I imagine that if you want the video to fit to the largest width/height dimension, rather than fitting to the smallest width/height dimension, you'd been looking at JavaScripts to do some nifty calculations.

If you do go the JavaScript route, this looks quite nice: http://jsfiddle.net/GCtMm/

[Beverleyh]

After a bit more fiddling, if you use media queries to detect the browser aspect ratio, you can increase either the width or height of the video to fill the viewport.

The video excess/overhang can be hidden too if you put it in a container with overflow:hidden;.

So make your markup look like this;
<div class="vid-wrap">
<video autoplay poster="poster.jpg" id="bgvid" loop>
<source src="christmastree.webm" type="video/webm">
<source src="christmastree.mp4" type="video/mp4">
</video>
</div>

and change your CSS to this;
.vid-wrap {
overflow: hidden
}
video {
position: absolute;
top: 0;
z-index: -100;
background: url(poster.jpg) no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
video {
height: 400%;
top: -150%
}
}
@media (max-aspect-ratio: 16/9) {
video {
width: 400%;
left: -150%
}
}

[FrickenTrevor]

Thank you! It works however the video overhang still shows when you scroll down the page. The scrollbars have been hidden, however if you use a mouse wheel the page still scrolls down and reveals the overhang. I have thought about disabling the mouse wheel, and up/down the keys on the keyboard by doing this:



document.attachEvent('onmousewheel', function(e){
if (!e) var e = window.event;
e.returnValue = false;
e.cancelBubble = true;
return false;
}, false);
document.onkeydown = function (e) {
if(e.which == 33){return false;}
if(e.which == 34){return false;}
if(e.which == 35){return false;}
if(e.which == 36){return false;}
if(e.which == 37){return false;}
if(e.which == 38){return false;}
if(e.which == 39){return false;}
if(e.which == 40){return false;}
}


Would this be a proper way or should the CSS just be fixed so there isnt any overhang?

[Beverleyh]

I would try to avoid disabling user controls and go with a CSS fix/workaround, however I'm not sure that I completely understand what you're describing. Do you mean that when other, long content is present on the page, the video floats up off the top? If so, you can stop that happening with position:fixed;

I'm just putting up a baseline demo to test: http://fofwebdesign.co.uk/template/_testing/fullscreen-video/ Tested in IE11, Chrome and Firefox. Is this more the effect you're after?

BTW, I recoded your mp4 to make it a bit smaller - 2500kbs at 15fps, no audio, and its down to 12MB (ish). Still looks pretty good quality too.

[FrickenTrevor]

Thanks everything looks good! The video quality still looks good for the fps being reduced.

[Beverleyh]

Some things that came to mind last night - just because the basic demo I put up was only tested on a desktop, and I think I should at least mention some fallbacks/considerations for other devices for anyone looking in on this thread in future...

On iPad, the video doesn't load so the poster attribute is needed to fill the void. http://www.w3schools.com/tags/att_video_poster.asp You already had that but I took it out when I stripped back to basics - I'll put it back in later

iPhones are different and the video lets you know it's there by plastering I big circular "play" icon overlay on the screen. It also begins playback as soon as you tap anywhere in the screen which would rule out any linked/clickable foreground elements for the rest of the page. You could counteract this in CSS (to a degree) by moving the video offscreen when the viewport gets too small;
@media ( max-width:576px ) {
video { left:-9999px; width:0; height:0 }
}This isn't bulletproof though and I haven't tested or researched on other devices.

There are better ways to detect mobile/touch so maybe you could look into doing that with Modernizr?

I actually like using the PHP regex here http://detectmobilebrowsers.com/ and then you could write the CSS directly to the <head> of the web page.

First detect mobile and set a variable if true (before doctype);
<?php
// ########## - http://detectmobilebrowsers.com/ - for additional tablet support, add "|android|ipad|playbook|silk" to first regex before first "/i" - Regex updated: 1 August 2014
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4)))
$mob = 1;
?>
Then in your web page <head>;
<?php if ($mob == 1){ /* mobile detected */ ?>
<style>
video { left:-9999px; width:0; height:0 }
</style>
<?php } ?>

Or if mobile is *not* detected, you can serve in desktop-only content;
<div class="vid-wrap">
<?php if ($mob != 1){ /* no mobile detected */ ?>
<video autoplay poster="poster.jpg" id="bgvid" loop>
<source src="christmastree.webm" type="video/webm">
<source src="christmastree.mp4" type="video/mp4">
</video>
<?php } ?>
</div>

About your actual video - its a simple "flashy fairy lights a sparkles" content so try editing it back to 3-5 seconds to vastly reduce the file size. From memory, the video length is 30-40 seconds? which is very long considering how minimal the movements are.

[FrickenTrevor]

There are better ways to detect mobile/touch so maybe you could look into doing that with Modernizr?
I have looked into it and played with Modernizr before, in BigVideo.js (http://dfcb.github.io/BigVideo.js/) they use Modernizr to detect touch, like so



if (Modernizr.touch) {
BV.show('video-poster.jpg');
}




On iPad, the video doesn't load

Good to know, and thank you for testing it. The video won't load because of how it is encoded, I have ran into this problem in the past. I believe there is a specific container/Baseline Profile that Apple needs for HTML5 Video, the original video is encoded in MP4 with H.264/AAC but I think the Baseline profile is wrong. I will re-encode the video.



About your actual video - its a simple "flashy fairy lights a sparkles" content so try editing it back to 3-5 seconds to vastly reduce the file size. From memory, the video length is 30-40 seconds? which is very long considering how minimal the movements are.

Yeah, that is something I still need to do.

[Beverleyh]

As far as I'm aware, the video doesn't load (an in autoplay) on iPad because Apple disabled autoplay in later versions of iOS to preserve end-user's bandwidth consumption, although the h.264 codec in the mp4 wrapper plays fine once its been set going with controls.

Yes, I use Handbrake too. I had a lot of playback problems with audio sync issues on iPhone (although not iPad or Android) using other video converters, and Handbrake was one that produced the best audio/video sync results, so thumbs up on your choice there.

I fiddled a bit more with the demo page for cross-browser compatibility http://fofwebdesign.co.uk/template/_testing/fullscreen-video/

For performance boosts on mobile, I quickly introduced the iPhone media query to hide the video off-screen on small devices, and I also used it to load in a lower quality background image (only 42kb) to make up for the missing "poster" image that it doesn't appear to load. Its the same image size/dimensions as the high quality "poster" version ( http://fofwebdesign.co.uk/template/_testing/fullscreen-video/xmas-x2.jpg optimised to 126kb), except I saved it at a really low 10% quality in Photoshop: http://fofwebdesign.co.uk/template/_testing/fullscreen-video/xmas.jpg This looks horribly pixelated on a desktop monitor but once its shrunk down on a small-screen retina device, it actually looks surprising HD, even at its teeny 42kb file size.

* Note that for the demo, I used the non-bulletproof CSS way to very simply "detect" iphone/mobile, but in a real production environment I'd probably use the PHP regex method.

The last change I made was for IE7/8 - as you'd expect, it wont load the "poster" image due to no video element support, so to avoid a blank screen, it needs a conditional comment to load it as a background-image instead.

Hope this helps