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} .

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”.

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.

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!