Tag: You Tube

How to make your Vimeo or YouTube video responsive

First of all wrap the video embed code with a’div’and specify a 50% to 60% padding bottom. Then, name and specify the child elements i.e ‘iframe’, ‘object’, ‘embed’ as having 100% width, 100% height, with absolute position. This forces all the embed elements to expand to full-width automatically!

Here is the html mark up

<div class="video-wrapper">
   <iframe width="500" height="281" 
src="http://www.youtube.com/watch?v=1CKgKKxyhBI" frameborder="0" allowfullscreen="">

Using CSS you can set the video to be responsive.

.video-wrapper { 
    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%;