andrew.hedges.name / blog

Responsive iframes in pure CSS

December 15, 2015, 12:15 pm · Filed under: CSS, JavaScript, Web Development

On a recent freelance gig, I needed to integrate a Tumblr feed that included YouTube videos into a fully responsive website. The videos are contained in…wait for it…. Lovely.

There were a few problems to solve to get this working, but the main one stems from the fact that CSS doesn’t allow for maintaining aspect ratios when sizing elements (with 1 exception that I’m aware of: ).

Turns out there is a CSS property that works this way. Hey there, padding.

When I googled it, I came across a couple of articles that pointed out this helpful fact. So, when you see padding-bottom: 56.25%; below, now you know where that came from!

The Solution

If you’re not part of the solution, you’re part of the precipitate.
~Chemistry Geek Humor

The following might be a little specific to my situation, but I’ll do my best to call out the parts that are generalizable.

Tumblr’s “API”

Tumblr has moved on to version 2 of their API, but they still support version 1, which offers a simple way to GET the latest posts from any Tumblr blog as either XML (gawd, shoot me now) or JavaScript (the API makes it seem like you’ll get JSON back, but it’s actually just a JavaScript variable with a big object assigned to it).

Here, try it (link will open in a new window/tab): http://theslantandgo.tumblr.com/api/read/json

You’ll see that it kinda boils down to:

var tumblr_api_read = {};

The simplest way to consume this “API” is to inject a