HTML 5 Full Screen and Responsive Videos

With ever increasing broadband speeds you can afford to create sites that are more media rich for appropriate projects. In this article we’ll be looking at creating a full screen video player using HTML5; you can see some excellent examples of where this has been implemented by various developers at awwwards.com.

Responsive and Full Screen Videos

We’re going to look at two implementations, firstly an embedded HTML5 video that is responsive to the width of the screen that maintains the original ratio of the video, and then another that will ‘zoom’ to fill the whole screen without any scrolling. Note that it isn’t possible to ‘stretch’ videos, the aspect ratio must be respected; this snippet was taken from www.whatwg.org regarding the video tag:

"...video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed."

Preparing Your Videos

Before we get started with the coding, you need to make sure you have your video in the correct formats. To be compatible with all modern browsers (note this example has been tested in recent versions of Chrome, Firefox, Internet Explorer and Safari at time of writing), I would recommend creating two copies of your video:

  • MP4
  • WebM

Videos will often start out in the former format, if you don’t have software to export in WebM then there are many online convertors available. There are other formats available that you can use, which you can read more about on ZenCoder’s blog if you wish to.

The HTML5 Video Tag

Now we can get onto some coding! The new HTML5 video tag makes it nice and easy to embed videos in your web page:

<video autoplay>
    <source src="video/trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="video/trailer.webm" type='video/webm; codecs="vp8, vorbis"' />
    Video not supported.
</video>

Note that we have a line for each of our video types, and some text if video is not supported by the browser.

Going Full Screen

Option 1 - Full width responsive

Next we want to make our video a bit bigger. Add the following css to your page (in one of the demos I’ve used embedded CSS to keep things simple).  

video
{
    width: 100%;
    height: auto;
}

Previewing the page will show how the video scales to fit the available width while maintaining the video ratio.

In addition, you could also add a 'max-height:100%' to ensure that you don't get any vertical scroll bars. With this method the maximum width or height will always be used without any scrolling. 

video
{
    width: 100%;
    height: auto;
    max-height: 100%;
}

But what if we want to fill the full screen for width and height? As previously mentioned it isn’t possible to stretch the video, but we can fill all the available space in a ‘zoomed’ version. The obvious downside of this is that depending on the screen size you will lose some of the video, so you’ll have to make a call on which method is more appropriate for your design.

Option 2 - Full width and height zoomed

To achieve a video that fills the screen for both width and height, firstly add a div tag container around your video (for this example give it a class called 'videoContainer'):

<div class="videoContainer">
  <video autoplay>
    <source src="video/trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="video/trailer.webm" type='video/webm; codecs="vp8, vorbis"' />
    Video not supported.
  </video>
</div>

Then add the following css:

.videoContainer
{
    position:absolute;
    height:100%;
    width:100%;
    overflow: hidden;
}

.videoContainer video
{
    min-width: 100%;
    min-height: 100%;
}

You should now have a video that fills all the available space on the screen. As an explanation to how this works; we're telling the video to use the maximum available width or height, but as it will maintain its aspect ratio this will mean it will overflow over the full screen size (unless you happen to be browsing in the perfect screen size). To overcome the issue of scrolling bars we wrap the video in a containing div that has the overflow hidden.

Demos

Here's a couple of demos for each of the above implementations:

Full screen video 
Ideal if positioning is not important, e.g. the video is for design asthetic.

Responsive full width video 
Ideal when the full video needs to be viewable, e.g. when it contains text.

Note there’s a transparent overlay to show the beginnings of how a full screen video could be worked into a design.

Like this post?

Check out our article on loading multiple HTML video players with jQuery dialogs.

Resources

Video file formats for HTML5 Video tag: http://blog.zencoder.com/2010/10/06/how-many-formats-do-i-need-for-html5-video/

Online Video Convertor: http://video.online-convert.com/convert-to-webm

Video Tag Specs: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#video

Big Buck Bunny Demo Trailer: http://www.bigbuckbunny.org/index.php/trailer-page/

 

Sign Up

NEXT: How much does Amazon Simple Storage Service (S3) cost?

Amazon Simple Storage Service (S3) provides an online repository for files, all running on the same infrastructure that Amazon uses to run it's own network of sites. Files can just be stored or made available on a url to download. This makes it great for anything from backing up all your photos and documents to serving up media files on your web site. In this post we'll look at the benefits and costs of using Amazon S3.

comments powered by Disqus
Sign Up

Popular Tags

350x250

Need a web developer?

If you'd like to work with code synthesis on your next project get in touch via the contact page.