RLASKEY::words

Dynamic, Responsive Embeds w/ CSS

This past winter, I was introduced to a concept which was actually developed back in 2009. Namely, if you have video content on your website, and you want a responsive design, there’s a very clever trick which requires a wrapper div and a bit of CSS.

Just now, I was able to set this up for my own site, with an extra twist: for each iframe embed I have on my page, I can loop through and replace it with a wrapped version. I can also then find the original aspect ratios, if available, and make sure that persists, regardless of the width of the page / elements. That’s enough words, so here’s the code:

The new thing here is that we can set the paddingBottom dynamically, via JS, with a fallback if needed, and the other CSS rules take care of the rest. If we wanted to depend on jQuery, this code could be even smaller, yet even as it is, we have a pretty compact solution.

WordPress

Since I’m running WordPress here, I also was able to integrate this easily with the JetPack Infinite Scroll plugin, by adding a callback on post-load. This means that after any new posts have been added, I wrap any new content in there as well.

I should also point out that it would be more efficient to have these wrappers in the HTML itself, rather than asking JS to make replacements on its own. The main reason I’m not doing that here is because WordPress graciously supports oEmbed,which means the HTML embed code is generated dynamically.

This way there’s a lot less for me to maintain. I can plop in the URL in my post, and forget about the rest. I can also clear out the cached versions, and on the next page view it’ll get that embed code again.

Seeking Feedback

I’m pretty happy where this is at, and I’d like you to try it out. Fork what’s there and add or integrate whatever you’d like. If you have any questions, you can write me, post on the GitHub Gist, or comment here. Thanks!

Mozilla’s Travel Guide

So good! Lots of really great info here, valuable for any and everyone. Thanks to Sheeri for the heads up!

2015-05-31

Quick track I made tonight. It’s been a while, but on the upside I’m pretty happy with it. Trying to not nitpick as much as I have, too, which seems to be working out.

Wired: Using Emoji Wrong

Sweet. At least I know it’s not just me, now. Shit is confusing sometimes.

NPR: Richard Rothstein

Historian Says Don’t ‘Sanitize’ How Our Government Created Ghettos. Unreal piece. Everyone really has to check this out, ASAP. My jaw literally dropped many times listening through this interview. It’s a very spooky, and rather well-hidden part of our society, despite the effects of it all being very much in plain sight. Please listen, then share.

NPR: Kind, Tribal Strangers

Why We Can Depend On The Kindness Of Strangers. Neat article. Makes sense, too. Basically, when you try to form a tribe, after you marry someone, you have to negotiate who you live with, and over time it won’t be all family from one of two sides. Point being: don’t fight your programming; be nice!

Toni Morrison: 2015-04

from Fresh Air. Such a great interview. I could listen to her talk for hours.