Resize youtube/vimeo iframe to maximum available height and width

0
505

Here is the code to make a flexible youtube.com or vimeo.com video fit both the height and width of the containing div. Like a flexible adsense unit it will take up the maximum available space on the page or be constrained within a containing object such as a div.

CSS:

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

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

HTML:

<div class=”vcontainer”>
<iframe src=”http://www.youtube.com/embed/IDxyz?controls=0&showinfo=0&autoplay=0&rel=0″ id=”vimdeo” webkitallowfullscreen=”” mozallowfullscreen=”” allowfullscreen=”” frameborder=”0″></iframe>
</div>

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here