Any idea how to use the WordPress sidebar for streaming Youtube videos?
It should update automatically with the latest video from my youtube channel and be automatically resized to fit a box of 300x250px.
Here is how to do this for Youtube videos:
( demo in sidebar: http://themes.go41.de/?wptheme=arthemia )
We are going to use a function built into WordPress 2.9 and later, the class simplepie.
To load this class you could install a plugin (SimplePie Plugin for WordPress) or use my easier way to load SimplePie.
We add a call to functions.php to enable SimplePie. Most themes have a file called functions.php, there we add just one line above the end ( just above ?> ) the following code:
-
/**
* If SimplePie class hasn't been loaded before try to load it again.
*/
if ( file_exists(ABSPATH . WPINC . '/class-simplepie.php') ) {
@require_once (ABSPATH . WPINC . '/class-simplepie.php');
} else {
die (__('Error in file: ' . __FILE__ . ' on line: ' . __LINE__ . '.<br />The WordPress file "class-simplepie.php" with class SimplePie could not be included.'));
}
-
As soon this code is in place, the class simplepie is available and we can use it.
Now we open up sidebar.php.
I am going to explain this for the theme Arthemia, but it is working in all themes having about 300px space in width.
In Arthemia's sidebar.php we are going to replace the 300x250px placeholder image.
This is loaded in this line:
<img src="<?php echo get_option('home'); ?>/wp-content/themes/arthemia/images/banners/square.jpg" alt="" width="300px" height="250px" />
leaving this line in place first we paste the following code just below this line, before the next </div>
This code will show the latest four videos of a user channel as an image, linked directly to the youtube page:
-
<!-- start 4 youtube images -->
<?php if (class_exists('SimplePie')) {
$user_name = herthatv; //put your username here with ';' behind !!!!!!!!!!!!!!!!!!!!!!!!!
$feed = new SimplePie();
$feed->set_feed_url("http://gdata.youtube.com/feeds/api/users/".$user_name."/uploads");
$feed->enable_cache(false); // disable caching
$feed->set_timeout(5);
$success = $feed->init();
$feed->handle_content_type();
$YT_PlayerPage = "http://www.youtube.com/user/".$user_name."#play/uploads/";
$YT_VideoNumber = 0;
$ShowMax = 3; // to show 4! images
foreach ($feed->get_items() as $item)
{
if ($enclosure = $item->get_enclosure())
{
$YT_VideoID = substr(strstr($item->get_permalink(), 'v='), 2, 11);
echo '<a href="' . $YT_PlayerPage . $YT_VideoNumber . "/" . $YT_VideoID . '"title="' . $item->get_title() . '"> <img src="' . $enclosure->get_thumbnail() . '" width="148" height="122" alt="' . $item->get_title() . '"/></a>';
}
if($YT_VideoNumber == $ShowMax) break;
$YT_VideoNumber++;
}
} // end Simplepie ?>
<!-- end 4 youtube images -->
-
That's it? No, you have to replace the user_name with your User Name, otherwise you will see the Hertha BSC clips.
This was easy, but what's about a really embedded video?
The following code will embed the latest video of your channel in your sidebar:
-
<!-- start youtube video -->
<?php if (class_exists('SimplePie')) {
$user_name = herthatv; //put your username here with ';' behind !!!!!!!!!!!!!!!!!!!!!!!!!
$feed = new SimplePie(); // setup the feed
$feed->set_feed_url("http://gdata.youtube.com/feeds/api/users/".$user_name."/uploads");
$feed->enable_cache(false); // disable caching
$feed->set_timeout(5);
$success = $feed->init();
$feed->handle_content_type();
?>
<?php if ($success): foreach ($feed->get_items(0, 1) as $item):
if ($item) { ?>
<?php
$YT_VideoID = substr(strstr($item->get_permalink(), 'v='), 2, 11); //get just ID of latest clip
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script>
<a name="ytplayer"></a>
<div id="ytplayer_div">You need Flash player 8+ and JavaScript enabled to view this video.</div>
<script type="text/javascript">
swfobject.embedSWF(
'http://www.youtube.com/v/<?php echo $YT_VideoID; ?>&enablejsapi=1&rel=0&fs=1',
'ytplayer_div',
'300',
'250',
'8',
null,
null,
{
allowScriptAccess: 'always',
allowFullScreen: 'true'
},
{
id: 'ytplayer_object'
}
);
</script>
<p><?php echo substr(strip_tags($item->get_description()), 0 , 300) . " \r\n"; //this line is the description if you like ?></p>
<?php } // end if there is an item
endforeach;
endif; //success
$feed->__destruct(); unset($feed);
} // end Simplepie ?>
<!-- end youtube video -->
-
Is that all? No, you have to replace the user_name with your User Name!!
One line in this code renders the description of your video, if you do not like this, you are free to delete this line:
<p><?php echo substr(strip_tags($item->get_description()), 0 , 300) . " \r\n"; //this line is the description if you like ?></p>
This code will create a valid XHTML embed code for the YouTube video using the free available swfobject library swfobject.js.
Problems? Just Join and ask...