Responsive You Tube Embed Video and articles I liked: Friday, September 23, 2011

This video makes me happy. Looking at happy people who showed up at first test run of Shinkansen in Kyushu. They aired it day after the earthquake and it lifted spirits.

All I am doing to make this video “responsive” is wrapping the iframe embed code that I got from youtube in div of class=”video”.
You can remove the height and width from the iframe, or you can leave it, since css is going to override them.

So the finished html looks likek this:

<div class="video"><iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe></div>

The class “video” has the css rule like this:

.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%;

CSS elastic video trick could have not been done if not for this blog post from I love smart people on the web who post/share codes! Thank you. I salute you.

I’ve been posting links that I liked at my Posterous page at Here are the week worth of links:

4 Responses to “Responsive You Tube Embed Video and articles I liked: Friday, September 23, 2011”

  1. It works well. But is it really essential to add .entry-content img. As it is not related with youtube embed video. It is for content image.

  2. Thanks for the comment. You are right, and my thought here is rather than creating a new css rule, just adding selectors
    .entry-content iframe, .entry-content object, .entry-content embed
    to already existing
    .entry-content img {max-width: 100%;}
    But hope you get my point.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>