Justin Tadlock

YouTube has become a bit of a phenomenon on the Internet, and everyone’s rushing to embed videos into their blogs. This is actually a fairly neat thing, especially if you blog a lot about videos or have videos that will emphasize the importance of your posts.

In my last two themes, Structure and Visionary, I created a block that displays the latest video from a category titled “Video” on the front page of the site. Take a look at a live demo that uses the code in this tutorial.

The technique I’ll show you here is completely valid XHTML and works with every browser I could think to test it on. In the example, we’ll use a YouTube video, but there are a number of video sites that you can use this technique on. This tutorial assumes that you are somewhat familiar with XHTML, PHP, CSS, YouTube, and WordPress. You must also be writing a post because we’ll need to use its custom field functionality.

For the sake of this tutorial, we’ll put our video in the sidebar of the theme. You can, of course, put the video wherever you want later.

Find your video

This is obviously the most important step in the process. The example I’ll use is from YouTube. You can check out the Sweatin’ video and use it as an example.

Once you’ve found your video, you need to get the embed URL. On the video’s page, you see a section titled “Embed.” You need to copy that code (see the highlighted portion of this image from our YouTube video):

The embed code that you copied should look like this (yes, it’s a mess):

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/FE_XpRmtcJw&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/FE_XpRmtcJw&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

The only part of that code we need is the URL you see in there (notice the missing “&rel” at the end):

http://www.youtube.com/v/FE_XpRmtcJw

Now, hold on to that for later.

Write your post

The next thing you want to do is write a post about your video. That’s the entire reason you’re doing this, right? When you’ve finished your post, you need to create a custom field. This part is fairly simple.

At the bottom of the “Write Post” screen there is a section labeled “Custom Fields.” There are two things you can input, Key and Value. The drop-down list is for custom fields you’ve already used. In the Key input box, type “Video” (make sure you capitalize “Video” because custom fields are case-sensitive).

In the Value input box, type “http://www.youtube.com/v/FE_XpRmtcJw.” Yes, that’s the URL of the video you want to use.

Click the button “Add Custom Field” and you’re done, at least with the posting part. Of course, we still have to code this thing.

The code

As I said earlier, we will put our code in the sidebar, but you can place it in many different places. First, open “sidebar.php” in your favorite text editor. The code we’ll input will probably have to be integrated into whatever type of menu system you have in your sidebar.

Now, you’ll lay down the framework.

<div id="sidebar">
	<div class="video">
	<div>
		<!-- All other code will go here -->
	</div>
	</div><!-- video -->
</div><!-- sidebar -->

Next, we need to query the posts and begin the loop. In our query, we call for the latest video in the “video” category. You could easily change this to query videos by tag by changing “category_name=video” to “tag=video.”

<?php
// This file displays the latest video article on the front page
	rewind_posts();

// Query one post from "video" category
	$my_query = new WP_Query('category_name=video&showposts=1');
	while ($my_query->have_posts()) : $my_query->the_post();

We will grab the custom field information and display the post title after that.

// Get the "Video" custom field Key as an array (displays single Value in the video block)
	$video = get_post_custom_values($key = 'Video');

	<h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>

Now, for the bread and butter of this application — a valid XHTML video embed. We check to see if there’s a custom field Key named “Video” with a Value. If there is, the video is displayed. You can also change the width and height of the video player in this part.

<div class="v<?php echo $i; ?> video">
<?php
// Check to see if custom field "Video" is set and if it has anything in the "Value" field.
	if(isset($video[0]) && strcmp($video[0],”)!= 0)  {

// Display valid XHTML player for YouTube, Google, MetaCafe, and other video sites
// “echo $video[0];” displays the first item in the array for the custom field “Video”
?>

<object type=”application/x-shockwave-flash” data=”<?php echo $video[0]; ?>” style=”width: 290px; height: 242px; border: none; padding: 0; margin: 0;” id=”video-block-<?php echo $i; ?>”>
	<param name=”movie” value=”<?php echo $video[0]; ?>” />
	<param name=’wmode’ value=’transparent’ />
	<param name=”quality” value=”best” />
	<param name=”bgcolor” value=”transparent” />
	<param name=”FlashVars” value=”playerMode=embedded” />
</object>

<?php
	} // endif

All that’s left to do now is to add a little error checking code and close off the loop. This will make sure you’ve added some type of Value to the custom field Key of “Video.”

// If there is no Value for the custom field Key "Video"
else {

// echo error checking to check custom field errors
	echo 'Did not add a video URL to the custom field <strong> Key</strong> of "Video"';
	echo '<!-- This user did not add the video URL to the correct custom field -->';

	} // endelse
?>
</div> <!-- video -->
<?php endwhile; ?>

Save “sidebar.php.” That’s it for the most part. You might want to consider a few style rules to make it look a little prettier.

Stylesheet

Open “style.css” to add some CSS rules for your extra video feature. Here’s a starting point, but you’ll have to edit it to fit your needs. This code is meant to work with the code above. So, if you’ve changed the width and height of your player, you might have to accomodate.

.video {
	display: block;
	float: left;
	overflow: hidden;
	width: 288px;
	margin: 0 0 10px 0;
	padding: 2px 5px 10px 5px;
	text-align: center;
	}
.video div {
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	display: block;
	}
object { padding: 0; margin: 0; }

The finished product

I hope by now that you haven’t had too many headaches getting this to work. Here’s an example of how this should look in a completed sidebar.

We’re completely finished now. I hope you’ve enjoyed this tutorial and add a video section to your site today. Be sure to subscribe to the feed to get more WordPress tutorials.