James Bachini

Resize youtube/vimeo iframe to maximum available height and width

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=”https://www.youtube.com/embed/IDxyz?controls=0&showinfo=0&autoplay=0&rel=0″ id=”vimdeo” webkitallowfullscreen=”” mozallowfullscreen=”” allowfullscreen=”” frameborder=”0″></iframe>
</div>

 

Get The Blockchain Sector Newsletter, binge the YouTube channel and connect with me on Twitter

The Blockchain Sector newsletter goes out a few times a month when there is breaking news or interesting developments to discuss. All the content I produce is free, if you’d like to help please share this content on social media.

Thank you.

James Bachini

Disclaimer: Not a financial advisor, not financial advice. The content I create is to document my journey and for educational and entertainment purposes only. It is not under any circumstances investment advice. I am not an investment or trading professional and am learning myself while still making plenty of mistakes along the way. Any code published is experimental and not production ready to be used for financial transactions. Do your own research and do not play with funds you do not want to lose.

Posted

in

,

by

James

Tags:

, ,