Make Video Embeds Automatically Responsive in WordPress (Without a Plugin)

Serving video that adapts well to all viewports, whether on the desktop or your iPhone should be a priority for your web site. Here’s one way to embed your videos in WordPress that takes just a few minutes to complete.

The obvious downside to not using a plugin is that the code provided in this tutorial needs to be copied over if you ever change your theme, but it’s still a fairly simple way to achieve the results you need. Note these instructions applies specifically to YouTube and Vimeo embeds.

1. Create the PHP Function

The first step is to open your functions.php file and add the following code:


<?php

if(!function_exists('video_content_filter')) {
	function video_content_filter($content) {
	
        //looks for an iFrame on the page
		$pattern = '/<iframe.*?src=".*?(vimeo|youtu\.?be).*?".*?<\/iframe>/';
		preg_match_all($pattern, $content, $matches);
	
		foreach ($matches[0] as $match) {
			// iFrame found, now we wrap it in a DIV...
			$wrappedframe = '<div class="vid">' . $match . '</div>';
	
			// Swap out the original with our now-encased video
			$content = str_replace($match, $wrappedframe, $content);
		}
	
		return $content;
	
	}
	// Apply it to post or page content areas
	add_filter( 'the_content', 'video_content_filter' );
	
	// Apply it to your sidebar widgets if you like
	add_filter( 'widget_text', 'video_content_filter' );
}

?>

2. Add CSS for Responsiveness

Now that our videos are wrapped in our required <div>, we need to apply some CSS to make it responsive in the viewport. Add the following to your theme’s style.css file:


div.vid {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin: 50px 0; /* this is optional */
  clear: both;
}

div.vid iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Now upload your changes in both files to your site’s theme directory (or, if editing in the WordPress theme editor itself, make sure your changes are saved).

Now we’re ready to start adding videos!

Add a Video to Your Page…the Quick ‘n’ Easy Way

Go to a YouTube or Vimeo you want to embed in your post or page.

Copy the URL from the browser (example: http://www.youtube.com/watch?v=UbOSTM3IozY)

In your post/page editor, paste the URL where your want your embed to appear. Note: make sure it is not hyperlinked. If a hyperlink appears after saving your post, remove it.

Save or Publish! Don’t worry if the video appears small in your editor. It’ll look fine on the page when you view it.

Add a Video to Your Page…the Hard Way

Go to a YouTube or Vimeo you want to embed in your post or page.

Right-click in the video player itself and choose ‘Copy embed code’.

Paste the code in your editor, the Text view. Ignore the width and height parameters in the iFrame code. Our CSS will override it.

Save or Publish.

See it in Action

The clip below shows the solution in action. Resize your browser and see the video adapt to the content area of your page. If you’re viewing this on a tablet or smartphone, the video should be fitting nicely already.

Like this post?
Tweet it, share it on Google+, or subscribe to my feed

Comments