A less annoying way to embed video in responsive websites

A twisted, wireframe mesh.

If you’ve spent any amount of time coding websites then you’ve repeatedly run into instances where you need to embed a video or similar multimedia asset into a website. Simple right?

You visit YouTube, find the video that needs to be added to your page, hit share, expand the options, configure the video player embed details, copy the code, paste it into your website, and hit save/publish.

Done. Well, almost. Now as you preview your beautiful, responsive website (the one with the carefully calibrated breakpoints for tablet and mobile devices) you discover that the little snippet of iFrame/embed code you just added totally breaks the layout of your site.

You could yell at your site, go for a walk, and then jump back in and begin improvising a solution. Or you could visit embedresponsively.com.

Embed Responsively creates magical snippets of code that fluidly scale video embedded into any responsive website. You can select from popular media sources like YouTube, Vimeo, Dailymotion, Google Maps, Instagram, Vine, Getty Images (why?), Generic iFrames, and more.

Web developer Jeff Hobbs created Embed Responsively from his digs in the Pioneer Vally of Western Massachusetts—which sounds like one of the prettiest places one could choose to code from.

Thanks Jeff! Embed Responsively is an elegant solution to a common and annoying problem all web developers and publishers face.

You can follow Jeff on Twitter, download or fork the Embed Responsively code on GitHub, or visit Jeff’s website at explodedview.co.

// Feature photo courtesy Kyle McDonald / Flickr, some rights reserved.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

5 × five =