Responsive Videos

Here’s a website we’ve just completed for the Queen of Horror Festival in Hastings, www.pittofhorror.com.

Aside from being completely responsive, working on multiple devices and screen sizes, one of the features of this site that we like is the video on the homepage.

Zurb Foundation create a lovely wrapper for Vimeo and YouTube videos to make them responsive (they stretch and shrink to fit the size of the screen being used) whilst WordPress has a great feature that auto-embeds videos by just pasting the video link into the post or page.

We have combined these two features with a simple bit of PHP that adds the responsive wrapper to the auto-embedded videos. If you want to use it in your own WordPress theme, just add this code to your functions.php file in your theme …

add_filter(’embed_oembed_html’, ’embed_flex_video’, 99, 4);
function embed_flex_video($html, $url, $attr, $post_id) {
return ‘<div class=”flex-video”>’ . $html . ‘</div>’;
}