This actually works just as good with any other iframe embedded video – I just happened to stumble upon this when creating a tumblr theme.

The problem with the tumblr video posts is that the iframe comes with height and width values, that don’t scale properly with width: 100%; and height: auto; .

The way I solved this using JavaScript to calculate the iframe’s aspect ratio and applied the according padding to the parent container.

We’re assuming that the following is the code we use to render our video posts within our {block:Posts} .

{block:Video}                            
    <figure {block:Caption}class="with-caption"{/block:Caption}>
        <div class="video-wrapper">
            {VideoEmbed-700}
        </div>
        {block:Caption}
        <figcaption class="post-description clearfix">
            {Caption}
        </figcaption>
        {/block:Caption}
    </figure>
{/block:Video}

Now we’re just adding a standard padding of 56,25% to the “video-wrapper” and completely taking away the sizing on the iframe, using a little CSS. The padding of 56,25% corresponds to the aspect ratio of a lot of video formats , therefore you have the best chances of creating the appropriate ratio before the JavaScript manipulated the parent element. Remember – the percentage value in this case will always be relative to the width of the “video-wrapper”.

.video-wrapper {
    position: relative;
    padding-bottom: 56,25%;
    overflow: hidden;
    width: 100% !important;
    height: 0 !important;
}

.video-wrapper iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

Now we loop over all “video-wrapper” divs, get the aspect ratio of the iframe and apply the padding to the parent element using JavaScript.

// get all video wrappers
var videoWrappers = document.getElementsByClassName('video-wrapper');
// loop over each of them
[].forEach.call( videoWrappers, function (el, i) {
    // cache width and height values of the iframe
    var width = el.getElementsByTagName('iframe')[0].width,
        height = el.getElementsByTagName('iframe')[0].height;
    // apply the padding to the video wrapper
    el.style.paddingBottom = height / width * 100 + '%';
});

And there you go – no matter what ratio the videos are posted in, they will always display properly. Be sure to check out the live demo provided through the button at the top of the post.

If you liked this tip, please help promoting this page by sharing this link or liking us on facebook.


Want to start your own blog? – Get great web hosting solutions from only $3.95 per month!