New WordPress Plugin: Fluid Video Embeds

Lately I’ve been “dog-fooding” a lot of the work I do; forcing myself to actually use all of the products and code that I write. This is nothing new, but as of late I’ve been taking it to heart. If I code something, it has to be worthy of me using it on my site, or my mom’s site, etc.

If you don’t feel like reading, check out the live demo page. Or read on and find out why I created this and what the big deal is.

WordPress has a great auto-magic way of handling video and photo embeds; oEmbed. It allows you to paste a YouTube URL or a Flickr photo page URL into your post and it handles the rest. It will embed the YouTube video automatically, it will embed the Flickr photo with an appropriately sized image linked to the original, and the list of “providers” is ample!

The oEmbed system is great, but it does leave something to be desired when responsive sites come into question. YouTube and Vimeo videos (my video services of choice) will simply be fixed at the width defined in the WordPress settings (I believe that the oEmbed spec has accommodations for defining a maximum width). This was a problem as my site is using media queries in order to be more responsive. Fixed width videos just don’t work with responsive layouts.

My research on fixing this issue led me to this post on Web Designer Wall. Which, in turn led me to a post on TJK Design, which then led back to A List Apart and their great article on creating Intrinsic Ratios for Videos in CSS.

The above research told me that I needed to create a video container that would house my video at 100% x 100% while maintaining a ratio on the container equivalent to one YouTube video at 16:9 plus the space for a YouTube play bar… 30 pixels, I believe. The technique is sound, but the programmer in me cringed at all the rigid elements of this solution.

1. Only works for 16:9 videos. Videos with 4:3 or 2.39:1 ratios would be letter boxed or pillar boxed.
2. The accommodation for the 30px of YouTube play bar meant that Vimeo videos (where the play bar sits over the video and does not add any height to the video) will be letter boxed; even at a 16:9 ratio.
3. It requires you to wrap all of your video URLs in an extra bit of markup; the video container.

This felt messy, and that’s why I took my Saturday afternoon to write a plugin that would solve these specific issues.

Here’s my Fluid Video Embeds plugin in the WordPress plugin repository.

And here’s the demo page where you can see it in action.

My plugin (in a nutshell) does the following:

1. Filters the natural WordPress embed process and hijacks the YouTube and Vimeo embeds.
2. Asks the YouTube and Vimeo APIs about the videos. It fetches width, height, aspect ratio, title, and other metadata, then caches the info for later.
3. It also wraps the embed in a video container element to help with the ratio and styling.
4. Cleans up the info that is shown over the video to help with appearance and thus de-cluttering the video for smaller screen sizes.
5. Applies the correct ratio to the video’s container. This means there’s no letter boxing or pillar boxing.
6. And finally, the plugin makes the video scale to 100% of the available width using no extra JavaScript to do so.

There are other plugins that accomplish flexible video embeds, and they handle many more video services, but my plugin does the specific things that I need it to do and I’m once again quite happy with my responsive layout.

Please give the plugin a try, and let me know what you think.