May 28, 2012

Responsive Online Video

Want YouTube/Vimeo videos to be responsive? Try wrapping the iframe code in a div.

<div class="video">

</div>

Use the following CSS.

.video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.video iframe, .video object, .video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
 
.entry-content img, .entry-content iframe, .entry-content object, .entry-content embed {
max-width: 100%;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php