RSS Feed
Article: Responsive YouTube Videos In WordPress
Responsive YouTube Videos In WordPress

Posted In Tutorials

Responsive YouTube Videos In WordPress

Some “how to handle media” decisions need to be made when building a responsive website. While image usage is still up for debate, video usage can be tackled without question.

The CSS & HTML

Using some cleaned up code, we can get the tools in place for our video container.

CSS


.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

HTML


<div class="video-container">
	<iframe width="420" height="315" src="http://www.youtube.com/embed/a4NCnH7RPZY?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

If you look in the HTML code, you might notice that we have a YouTube iframe in place. Regardless of the width and height that is in the code, the CSS will take priority and scale the video accordingly. This will work for any video embedding code that uses an iframe, object, or embed tag.

Getting Into WordPress

The CSS and HTML code is straight forward and it could be used as is within WordPress. For clients, however, HTML code may be a bit out of their comfort zone. Fortunately, we can install a plugin called Smart YouTube Pro to make this easier on non-technical users.

With the plugin installed, log into the WordPress admin area and go to Smart YouTube » Settings. Under the Video Appearance option, we can specify some HTML around the video shortcode. Since the CSS is already written, we need to implement the correct tag around the video.


<div class="video-container">{video}</div>

Before saving, we want to make sure we check the 2 parsing option directly below the Video Appearance block to attempt to make this as fail safe as possible for clients. What those options mean is that a client can find the video they want, copy the URL link, and paste it right into WordPress. From there, WordPress will automatically create the embedding code. Smart YouTube currently supports videos from YouTube, Vimeo, Metacafe, Liveleak and Facebook.

As An Example

Being that our site is responsive, we utilize this technique. Below you can see a video example. If you resize your browser window, you should see the video fit this column width. For an added example, you can visit the following and click the device icons at the top of the page for the different standard sizes.

Ready to get started? Then contact us today!