Embedding Media on Responsive Websites

Embedding Media on Responsive Websites

I’m trying to become more fluent with coding for responsive websites at the moment. If you’re responsible for a website, it’s an important skill to have. The future holds more and more websites being built using a responsive format, pretty much to the point that if you build a new website today that is not responsive and has a poor mobile equivalent, you’re doing it wrong!

On that note, one of the difficulties I’ve had is when it comes to embedding media into pages, specifically YouTube videos into blog posts on responsive websites. By just dropping in the code, you’re left to find a compromise between a big enough video to look good on a desktop, yet small enough to play well without being too cropped on a mobile device.

Many Content Management Systems – at present – don’t make any allowances for embedding media responsively, even if you have a responsive ‘theme’.

I’m lucky enough to work with someone who is a better coder than I am, and she’s really getting the grasp of coding for responsive websites. However, I was after a shortcut. With WordPress, I figured there’d be a plugin that you could use to convert YouTube code into a responsive format. But, just as I started looking, I came across this brilliant website.

Embed Responsively

Embed Responsively (I keep wanting to write responsibly) is as easy as it gets. Take your YouTube video URL, paste it in the box, get the code. Job frikken’ done. You can even preview the converted video, just in case you don’t believe it was that easy.

Embed Responsively

YouTube Embed Code Converted to Responsive

Here’s an example of the converted code (resize this window to see how the video changes size to fit your viewing dimensions) using a video which I happen to appear in (lol).

This is what the code itself looks like:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/dDned88sSLc' frameborder='0' allowfullscreen></iframe></div>

Although I had to make a slight change to the ‘height: auto’ parameter as something in my blog’s code was interfering with that. I got around it by changing it to ‘max-height’ with a numerical dimension.

As you can see when you visit the website itself, there are plenty of other options for embedding various media in a responsive format – Google Maps, Instagram, Vine, etc. Have a play.

Pretty handy service, huh?