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.

Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress