University of Vermont

UVM Self-help Web Guide

Responsive Video and audio players

Some content types may require special attention when using responsive design techniques. Additionally, since responsive design aims to optimize content for a wide range of devices, it is also important to consider specific limitations of mobile devices in presenting specialized content such as audio and video.

We've documented the most common specialized content type here. Contact the webteam for assitance with additional content types not covered in this document.

Video

Much like images, video can be dynamically resized in repsonsive designs with only minor modifications. While not an issue of responsiveness per se, video presents an additional challenge for web developers desiring compatibility across browers and devices. The core issue is the codec used to compress video files so that they can be delivered across internet connections. Browser publishers have not reached consensus on a single codec that can be handled natively in their software. For this reason over the past several years, Flash has been the delivery method of choice for presenting video on websites. However, Flash is not available on many mobile platforms, most notably on iOS devices such as iPhone, iPad and iPod.

Embed with YouTube or Vimeo

The easiest way to embed video that will play on most mobile devices and will resize correcting according to the size of the screen is to use YouTube. YouTube now offers an embed option that utilizes an iframe which means that the actual video is loaded in a page on the YouTube servers, and then that page is displayed in a small window on your web page. By wrapping the embed code provided by YouTube in a div with the class name "video-container", this window becomes flexible which in turn makes the video flexible as well. See the example code and resulting video below:

The code...

 <div class="video-container">
 	<iframe width="640" height="360" src="http://www.youtube.com/embe … "></iframe>
 </div>
 
Embed with the webteam supported JW Player and HTML5

The optimal method for delivering video content across multiple devices is to use HTML5 video. To effectively use HTML5 across all platforms, you'll need to save and upload your video in three different formats: .mp4, webm, and .flv. For this reason, we recommend this method only to experienced web developers or those with a high interest in delivering the optimal video experience for all visitors to their site. To find our more contact the webteam.

Here is an example of this method in action:

The Middle Way: UVM's media manager

If you shy away from YouTube and don't feel quite ready to use the JW Player method then UVM's Mediamanager might be a good fit for you. The tool provides an easy to use web interface for uploading and storing video and audio content, and then also provides the code for embedding that media in your website. With a little extra work, you can then make these video and audio players responsive. The downside to using this method is that the media will not "play in place" on some devices. For those who are not able to play in place, a version of the media will be downloaded. This may not be desirable for people who have a limited download plan on their mobile device.

The media manager can be found here: http://www.uvm.edu/mediamanager

Once you have uploaded your video and copied the provided embed code, paste it into your webpage and surround the code in a new div with the class named "videowrapper". See the example and code below.

 <div class="video-container">
 	[[ media manager embed code goes here ]]
 </div>
 

Last modified January 29 2013 04:34 PM