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_XpRmtcJwNow, 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
} // endifAll 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.
Useful stuff – thanks!
Thanks Darren. Maybe you’ll implement this in one of your theme designs.
brilliant! i’m gonna try it, i was looking to create some sort of sideblog with videos!
i’m here again… is there a way to create a plugin with this?
i know nothing about php and programming…
thank you!!
Justin, have you ever had multiple videos in a player? I’m using your video block and I’d like to have a “next video” link underneath it so users can browse right on the home page. I’ve looked at wordpress’s next_post links and haven’t quite got them to work. Any ideas?
Well, I’ve tried twice to post the whole code but it doesn’t appear to be showing up.
It an interesting plugin. I would however appreciate it if someone could assist me in finding a similar plugin but one that would allow me to post mutiple videos on my African safari vacations blog.
Justin you are a very smart guy.I love the Structure and thanks for that.But why all the hard work when you can copy the URL from the address bar?
Mithila
You can’t just copy the URL from the address bar. It won’t play. The URL in the address bar is to a page. The URL in the embed code is to the video.
Thanks Justin,you saved a lot of trouble.I asked this on your other pages too,but my comment got lost amongst other comments by thankers.Is there any way to remove the “Example” page from the top page list?And how can I get other pages listed there too?You’ll see this if you see my blog,I can only have two pages and the example page which only leads to the same about page?Please help!
Thanks.
Any Idea how to get it working with Vimeo? They do a lot more Resolution, so I choose them to show my work.
I’ve tried everything and I couldn’t put video on my blog…
HELP ME
Mithila Mangedarage
I’m not sure what you’re referring to with “Example Page.”
GPSchnyder
I haven’t tried with Vimeo. I imagine you’ll just have to find the right embed URL.
Thiago Prado
“I’ve tried everything” really doesn’t tell me much.
I do see that you’re using my Structure theme. I have support forums for that. You shouldn’t be following this tutorial as it could be different from the theme.
I’m pretty much a novice at this. I’d like to use the Video Tabs as demonstrated on your demo for the Options dark. After figuring out the Feature Gallery I thought I could figure the Video Tabs out but it ain’t working. I’ve successfully posted the videos to their individual posts, I categorized them under Video and tagged them Video. I don’t understand what or if I need to change anywhere else. Would you direct me to the answers to this quandary. I even successfully used the sidebar widget but I didn’t seem to learn anything that would help me in this instance. The Theme is great and I’m looking forward to getting it together! Thanks.
Kirk
This is a general tutorial for people not using my themes and adding videos to their sidebars.
If you’re having trouble with any of my themes, then you should stop by the support forums.
Gotcha!
Hi Justin.
This is a great theme and rightly called Options because it can be used in so many different ways!
Quick question… I want to have my videos so that in the main post they are the width that they would usually be in YouTube (425 px) but the default size in your theme. How would you recommend me going about this? Placing videos in the post in a div or span with a separate class? Perhaps by changing the following line in ‘single’ template
if($video == true) echo $video;
TO
if($video == true) echo “”.$video.”";
Please let me know if you think this would be appropriate.
Thanks!
Ooops
Meant to be span tags inside of those brackets!
if($video == true) echo "".$video."";Hi..
Can I just copy the video link in the widget?
[...] videos not appearing in Firefox. The situation was this: a client was using the hack described by Justin Tadlock here to add YouTube videos to the sidebar of his blog. The hack uses WordPress’s “custom [...]
[...] videos not appearing in Firefox. The situation was this: a client was using the hack described by Justin Tadlock here to add YouTube videos to the sidebar of his WordPress blog. The hack uses WordPress’s [...]
I’ve tried exactly like your tutorial and I get this msg
Parse error: syntax error, unexpected ‘<’ in ……sidebar.php on line 205
Why is there an unexpected ‘<’
Anyway I can check which is line 205?
You tutorial is great. I used it on my site. Is it possible to integrate Brightcove videos using this technique. I’ve tried, but without luck. Thanks.
Hi justin,
I working on a site for my wife and i get an error when i copy the code you provided.
Error is as follows:
The entire code on the sidebar.php to show the videos looks like this:
Maybe you can get me a hint on what im doing wrong?
Hey everyone. The code above needs to be updated. Since my latest WP install and the database transfer, some of these old posts aren’t showing the code as it should be shown.
Plus, now I have some better techniques for this.
Stop by the forums and post your questions in the General Discussion thread for now. It’s much easier to post code there.
Okidoki, will do
I am having the same problem as kokkekniven is having above. I keep getting a Parse error: syntax error, unexpected ‘<’ in /home/thirbird/public_html/shopastylist.com/wp-content/themes/options/sidebar.php on line 77
I cannot find the extra ‘<’
It would be very helpful to see the entire side bar code so I can copy and paste in where I’d like. Is that possible? I am using the Options theme and I am having problems. Thanks!
Jay
Yes, but we found a solution for Kokkekniven because he took my advice and stopped by the forums.
Anyway, you should most definitely NOT be using this with the Options theme. It has its own sidebar video functionality. And, you should also go to the support forums for help with the Options theme.
Thanks i use,
Thanks a lot. you save me today:D
Hi Justin, I have a problem using your code.
Something is wrong, there only latest video appears in all post and also in front page.
Can you tell me how to solve this problem??
Adi
This is a bit of an old tutorial, but if you stop by my support forums, we can whip something up for you.
Sweet ! .. Thank you very much.
Great piece of code thanks.
Thank you for that framework…
i modified the section where the video is shown, cause I only add youtube videos. so I used the youtube-embed code an modified the value of the “Video”-key.
Thak you! You helped me a lot
Hello Justin,
I really tried from various plugins and I decided on her method, because of all that is was more appropriate to what I wanted on my site.
Congratulations on the ability and knowledge divided us.
Thank you.
I’m sorry, but i cannot add a video section to sidebar. I’m crying ;(
thank you has to share tips that make the more beautiful and I will try it now
[...] How to Add Videos to Your WordPress Sidebar [...]
Adding video is cool!!! But I’m having some problems adding it to my blog.
I’m really happy find this tutorial… thank’s for your sharing..
Hey i have a question. How do you actually get widgets and stuff onto the sidebar? Because i cant get anything of my choice onto the sidebar apart from the things that is already apart of the wordpress website but i just cant get anything of my own. Can you please help me.
That really helped me thanks. If you would like to check some of our stuff out you can go to Chosen for more info. Thanks Again.
thanks, I could finally add a video to my sidebar without screwing the entire page lolz
Is it possible to pull the latest video from posts into the sidebar w/o having to key in the custom field? Thanks!
Hello, I am trying to get a flash video to play in the sidebar of my wordpress blog. No problem there, I just pasted the embed code from Flash into a text widget for the sidebar. It works on home, but when you get onto another blog page within the site, the video’s skin disappears. I read somewhere that it’s because the skin file needs to reside in the same directory as the “index.html” file. Well, obviously wordpress, because of permalinks, dynamically creates virtual directories that don’t exist. therefore the skin file can’t just be duplicated into a directory that is not there… How can I solve this problem?
Thanks!
[...] To add a video simply copy the video source ex(http://www.dailymotion.com/swf/x4v05j | http://www.youtube.com/v/WbC8Sqi3vrU ) into the custom fields value area and add the name as Video. Publish the post under the category video. The script will collect the post automatically and if vieded as a single post the video will also show up.To learn more about the script used visit Justin Tadlock’s blog. [...]
for some reason the movie is not displaying on the home page, but in every other page it does…
Any idea?
[...] How to add videos to your WordPress sidebar YouTube has become a bit of a phenomenon on the Internet, and everyone’s rushing to embed videos [...]
Hi,
Is it possible to add a video and playlist in a fixed page themplate??
something like
[...] 13. How to Add Videos to Your WordPress Sidebar [...]
A lot more than I was expecting! Is there an existing plug-in or could this be made into a plug-in? The instructions are clear but code intimidates most contemporary bloggers.