Adding Responsive Videos to your Design

Responsive designs are all the hype in Web development communities nowadays. With videos becoming an important marketing tool on many websites, there is a growing need to incorporate responsive videos into these designs. Responsive videos are elastic and are especially favored where web pages will be viewed on different screen sizes using a variety of browsers.

Using the HTML5 video element however is not enough when handling video embed code that uses iframes and objects tags. Using the HTML5 video element will therefore not work for video found on most video sharing sites like YouTube and Vimeo. In order to do this,  you need to embed the code with a <div> container and specify the child elements with absolute positions. In this case, give 100% to both width and height. This forces the embed elements to automatically expand full width. Check out how this has been done in the markup below:

<head>
<title>Demo: Elastic Videos</title>
</head>

<body>
<div id="pagewrap">
<h1>
<h2>Resize your browser window to see the elastic videos</h2>
<h3>New YouTube Code (iframe)</h3>
<div class="video-container">
<iframe width="853" height="510" src="http://www.youtube.com/embed/3R2cnxz27LI" frameborder="0" allowfullscreen=""/>
</div>
<h3>Old YouTube Code (embed)</h3>
<div class="video-container">
<object width="500" height="400">
<param name="movie" value="http://www.youtube.com/v/NmRTreaCJXs?version=3"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="wmode" value="transparent"/>
<embed wmode="transparent" src="http://www.youtube.com/v/NmRTreaCJXs?version=3" type="application/x-shockwave-flash" width="600" height="420" allowscriptaccess="always" allowfullscreen="true"/>
</object>
</div>
<h3>With fixed 600px wide wrapper</h3>
<div class="video-wrapper">
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"/>
</div>
</div>
<h3>With fixed 500px wide wrapper</h3>
<div class="video-wrapper2">
<div class="video-container">
<object width="500" height="400">
<param name="movie" value="http://www.youtube.com/v/NmRTreaCJXs?version=3"/>
<param name="allowFullScreen" value="true"/>
<param name="allowscriptaccess" value="always"/>
<param name="wmode" value="transparent"/>
<embed wmode="transparent" src="http://www.youtube.com/v/NmRTreaCJXs?version=3" type="application/x-shockwave-flash" width="600" height="420" allowscriptaccess="always" allowfullscreen="true"/>
</object>
</div>
</div>
</body>

Here is the CSS for our responsive videos:

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Using CSS, we have the option of making the video auto resize to the max width or height within the set boundaries using the “max-width” tag. Likewise, minimum width of the video element can be set using the min-width tag.

To restrict the width of videos, wrap the video with another <div> tag and specify a fixed width value for it as shown below:

.video-wrapper {
	width: 600px;
	max-width: 100%;
}

A working demo of the above code snippet can be seen here.

SHARE THIS POST
  • mithrill

    Doesn’t this also work for embedded maps?

    • http://twitter.com/DavGit David Gitonga

      Hi Mithrill. You will need to try it out and see if it works on maps as well.

  • http://cbracco.me/ Chris B.

    You could also use something like FitVids.js (http://fitvidsjs.com/), which will add the div containers and necessary CSS automatically so the user doesn’t have to worry about it.

    • http://twitter.com/DavGit David Gitonga

      Thanks Chris for that resource.

  • http://twitter.com/DavGit David Gitonga

    Hi Jenn. Firefox 13.0.1 update has a problem rendering images and video content. I checked out the Mozilla website for a solution to the problem and the community forums suggested disabling all add-ons and then restarting FF in safe-mode. I hope this helps.

  • http://twitter.com/DavGit David Gitonga

    Hi Ess.Firefox 13.0.1 update has a problem rendering images and video content. I checked out the Mozilla website for a solution to the problem and the community forums suggested disabling all add-ons and then restarting FF in safe-mode. I hope this helps.

  • http://twitter.com/DavGit David Gitonga

    Hi JDD. Thank you for the suggestion. We will try and do that.

  • http://www.theflexus.com/services TheFlexus

    NIce, I am agree with you but demo doesn’t work for me in Firefox 13.0.1

  • Brian

    One note to make, in the tag on the first part, it needs the closing tag added. leaving it open-ended errors out the rest of the page loading. Best practice to always make sure your tags are closed.