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.