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 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 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/_...lscreen-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 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.