I enjoy simplicity, in everything. Unnecessary complexity is evil. Have a look at my WordPress plugins.

HTML 5 Video ‘Full-Screen’

A few days ago I was playing around with HTML 5 and it’s new (popular) video tag! The result in short: I love(d) it! Getting it to work in all the major browsers wasn’t that hard at all. I didn’t even use nasty JavaScript hacks for that, just some basic mark-up fallbacks. But.. I missed a functionality in all the video players: A full-screen mode. Wouldn’t be that hard to write a ‘full-screen’ function using jQuery, would it?

That’s why I decided to write a quick and dirty jQuery hack that somewhat gives a full-screen feeling. Or well, you could. I actually used it for a video to increase in size to it’s original dimensions. Getting it to increase even more (say full-screen) would just be a matter of changing some values in the script.

The basic mark-up for the video tag, works cross-browser

Let me start with how I set up my video tag to work in all the major browsers. Have a look.

<video controls width="520" height="310" style="cursor:pointer; z-index:99;">
	<source src="../video/kerk-woerden.ogv" type="video/ogg"/>
	<source src="../video/kerk-woerden.mp4" type="video/mp4"/>
	<object type="video/x-ms-wmv" data="../video/kerk-woerden.wmv" width="520" height="310">
		<param name="src" value="../video/kerk-woerden.wmv" />
		<param name="controller" value="true" />
	</object>
</video>

The only major drawback of this method is that I had to use 3 different file types, wmv, mp4 and ogg. But hey, it worked out pretty easy and converting wasn’t the problem. (BTW: I used Miro Video Converter, great free tool)

I added a simple inline style rule to make it more obvious for the visitor that they can click on the video, we’ll add
some more evidence later on in the script.

Adding a double click event.

With most video players it’s obvious that in order to get the video to play in full screen you have to double click it. That’s why the first thing we’re going to do is to add a double click event listener.

$(document).ready(function() {
	$('video').dblclick(function() {
		//our method to get the video 'full-screen'
	});
});

Increasing the video size.

Now, what we want is the video to increase in size whenever someone double-clicks it. We can simply do this by changing the width and height attribute using jQuery’s attr function. Because I didn’t increase the video to full-screen during my play around I thought it would be nice to increase the video’s size and then center it on the screen.

To center the video I few lines of code that you can grab to extend your jQuery library, it might come in handy anyway!

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

Before we can actually center the video using our newly added function we need to get it out of it’s parent element. For some this might not be necessary, but it’s better to be safe. Because we want our visitor to be able to restore the video size to it’s previous size, let’s store the original parent element in a variable.

Another thing we can already add is a clone of the original video element, along with it’s attributes, event listeners etc.. This is because we want to restore the video the way it was.

var parent = $('video').parent();

$('video').dblclick(function() {
	if(!$(this).hasClass('fs')) {
		//video is not in full-screen mode, let's go there!
		var $clone = $('video').clone(true);
	} else {
		//video is in full-screen, let's restore it
	}
});	

Notice the check for the class ‘fs’. We’re not actually using that class for styling purposes, just to see if the video is in full-screen modus. Now all that’s left to do is to call some functions that actually DO stuff, like increasing the video size!

var parent = $('video').parent();
$('video').dblclick(function() {
	if(!$(this).hasClass('fs')) {
		//video is not in full-screen mode, let's go there!
		var $clone = $('video').clone(true);
		$(this).appendTo('body').attr('width','640').attr('height','480').center().addClass('fs');
	} else {
		//video is in full-screen, let's restore it
		$(this).remove();
		$clone.appendTo(parent);
	}
});

That’s all! Now, whenever someone double-clicks the video the attributes that set the width and height of the video change to the values you provided in this little script. The video also gets centered on the screen, horizontically and vertically! All that’s left for you is to add a little more css styling so that it actually LOOKS good.

Share this post: on Twitter on Facebook

2 Responses to “HTML 5 Video ‘Full-Screen’”

Leave a Reply