Video and other rich Internet media are an important part of ecommerce website development and design.

How you choose to implement video in your site builds should and will vary from project to project. One popular arrangement is to host videos on a third-party service like YouTube and engage an API to programmatically add those videos to your site project.

For the past few weeks, I have been describing how to interact with the YouTube PHP client library. In "Part One," I explained how to get the Google Gdata library, add it to your server, test it, and then parse out some video data. In "Part Two," I added a counter to the PHP in order to feature one particular video and provide other "video" content as thumbnail images. "Part Three" of this tutorial series focused on managing the page structure and preparing the video thumbnails.

In this fourth installment, I am going to use JavaScript to build a basic content slider and a means to play the videos referenced as thumbnails.

Step No. 10: Add a "See More Videos" Link

When I laid out the page in "Part Three," I hid some of the page content by defining the dimensions of the div element holding the thumbnail images.

#wrapper {margin: 0 auto; width: 1020px; overflow: hidden;}


/*Video Slider Styles*/
#restrictor { height: 900px; width: 9999px;}
.video-th {display: inline-block; height: 220; width: 200px; text-align: center; margin: 1px;}
.video-th ul {list-style: none; padding: 0; }
.video-th ul li {padding: 0;}
.video-th img {width: 180px;}

Now, I want to develop a mechanism that will reveal the additional thumbnails. To achieve this, I need some sort of a trigger. So I am going to add a "See More Videos" link of sorts.

This trigger will be added to my page in simple HTML after the close of the restrictor element and before the close of the wrapper element.

<h2 id="more">See More Videos >></h2>

As you can see, this is not a proper anchor tag. So I needed to add a cursor declaration to the style sheet so that it will look clickable.

#more {cursor: pointer;}

Step No. 11: Add an Event Listener

I want to reposition the thumbnails whenever a user clicks. So I need to add an event listener that will take action when a click happens. I want to include this listener in an external JavaScript file; so I need to create that file, add it to my page just above the closing body tag, and then add the actual listener to that file.

Here is the script tag for the page.

<script src="js.js"></script>	

And now, here's the actual event listener that will be inside of my js.js file.

var trigger = document.getElementById('more');
trigger.addEventListener('click', moveThumbs, false);

Step No. 12: Put Things in Motion

My event listener calls a function, moveThumbs, so I had better get to work creating that function. I am going to be building a very basic content slider or mover that needs to accomplish a few things.

First, it must identify the div elements that contain my video thumbnails. Second, it should reposition the list. Third, since I am providing a single link to move the list items, I need it to be circular.

Here is the JavaScript I used to make this happen.

function moveThumbs(){
	var parentDiv = document.getElementById('restrictor'); //find the restrictor div
	var videoDivs = document.getElementsByClassName('video-th'); //create a node list of the div elements containing thumbnails
	for(var i = 0; i <= 4; i++){
parentDiv.appendChild(videoDivs[0]); //one by one remove the first five divs and add them to the end
	}

}

As you can see, I first identified the div element that contains all of the thumbnails.

var parentDiv = document.getElementById('restrictor'); //find the restrictor div

Next, I created a node list of the div elements that contain the thumbnail images.

var videoDivs = document.getElementsByClassName('video-th'); //create a node list of the div elements containing thumbnails

Finally, I used a loop to remove the first div in my node list and add it to the bottom of the parent element five times. Effectively, this repositions the list of thumbnails and makes the content slider/mover circular all in one step. The user can click on the "See More Videos" link endlessly and the video thumbnails will just keep circling around.

Step No. 13: Change the Featured Video

Now site visitors can see all of the videos that I have collected from YouTube. But only one video, the featured video, is actually playable.

I want users to be able to click on a video thumbnail and have that video replace the featured video so that they can watch it.

I am again going to use some JavaScript to (1) capture a click event; (2) find the YouTube ID for the associated video; and (3) replace the featured video.

Here is the code I used.

document.addEventListener('click', changeFea, false);
function changeFea(e){
	var target = e.target.id;
	if(/video-img\S/.test(target)){
		var videoId = target.split(/(video-img)/);
		var videoTitle = document.getElementById('video-title' + videoId[2]).innerHTML;		
		var newVid = '<object id="theplayer" width="1000" height="587"><param name="movie" value="http://www.youtube.com/v/' + videoId[2] + '?fs=1&amp;hl=en_US"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'  + videoId[2] + '?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1000" height="587"></embed></object>';
		var feaVid = document.getElementById('restrictor').children[1];
		var feaVidTitle = document.getElementById('restrictor').children[0];
		feaVid.innerHTML = newVid;
		reaVidTitle.innerHTML = videoTitle;
	
	}
	
}

I placed a new event listener on the document object, so that every click on the page is sent to a function called changeFea().

document.addEventListener('click', changeFea, false);

The changeFea function first finds the target element's id and then tests that id against a regular expression inside of a conditional statement. If the target id includes the phrase "video-img" the conditional statement is true and the enclosed code runs.

Because they can be a little cryptic, regular expressions are too often avoided. But in this case, it is the best way to ensure that the click event is aimed at one of the thumbnail images. The regular expression pattern /video-img\S/ simply describes a string wherein the phrase "video-img" is followed by any number of characters.

var target = e.target.id;
if(/video-img\S/.test(target)){

In the PHP that I wrote in "Part One" of this tutorial, I had the script append the YouTube ID for each video to the element id of each thumbnail image. If I take a closer look at the image id tested above, I see that on my page it will look something like this: "video-img9CJHHSArZQk" wherein "9CJHHSArZQk" is the YouTube ID. I need to separate out this YouTube ID so that I can construct a video player to replace the one showing the featured video. To do this, I again use a regular expression and the split() method to divide the various sections of the element id into an array.

var videoId = target.split(/(video-img)/);

The resulting array has three parts, the third of which videoId[2] is the YouTube ID. (The third part of the array is videoId[2] and not videoId[3] because arrays are zero-based.)

Next, I need to find the title associated with the thumbnail that the user clicked. It will also have a unique ID that looks something like "video-title9CJHHSArZQk" so that I can use the YouTube ID that I found above to identify it.

var videoTitle = document.getElementById('video-title' + videoId[2]).innerHTML;	

I now need to add the code that will embed a Flash player and load the YouTube video based on its ID. Notice how I am using the variable videoId[2] to specify the exact URL I want.

var newVid = '<object id="theplayer" width="1000" height="587"><param name="movie" value="http://www.youtube.com/v/' + videoId[2] + '?fs=1&amp;hl=en_US"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'  + videoId[2] + '?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1000" height="587"></embed></object>';

I now need to locate the elements containing the featured video and the featured video's title.

var feaVid = document.getElementById('restrictor').children[1];
var feaVidTitle = document.getElementById('restrictor').children[0];

Finally, I replace the content of the elements containing the featured video and its title, and my video player is now complete.

feaVid.innerHTML = newVid;
reaVidTitle.innerHTML = videoTitle;

Summing Up

In this tutorial series, I've demonstrated how to use the YouTube PHP Client Library, HTML, CSS, and JavaScript to collect a specific set of YouTube videos and present those videos on page. This implementation is pretty basic, but should help you with your video projects.

Related Articles

• Add Video with YouTube API and PHP Client Library, Part One
• Add Video to Your Project with YouTube API and PHP Client Library, Part Two
• Add Video to Your Project with the YouTube API and PHP Client Library, Part Three

Search Terms

• video
• YouTube
• API

<?php 
/**
*YouTube example
*/
?>


<!doctype html>
<html lang="en">
<head>
    <title>YouTube PHP API Example</title>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="style.css">
    <link rel="icon" type="image/png" href="favicon.png">
</head>
<div id="wrapper">
    <h1 class="header">Video Gallery</h1>
    <div id="restrictor">
    <?php 
        require_once 'Zend/Loader.php';
        ZendLoader::loadClass('ZendGdata_YouTube');

    function getUserVideos($username){
        $yt = new Zend_Gdata_YouTube();
        manageVidFeed($yt-&gt;getuserUploads($username));
    }

    function manageVidFeed($videos){
        $count = 1;
        foreach($videos as $video){
            if($count == 1){

                echo '&lt;h3&gt;' . $video-&gt;getVideoTitle() . '&lt;/h3&gt;';
                echo '&lt;p&gt;&lt;object id=&quot;theplayer&quot; width=&quot;1000&quot; height=&quot;587&quot;&gt;';
                echo '&lt;param name=&quot;movie&quot; value=&quot;http://www.youtube.com/v/' . $video-&gt;getVideoId() . '?fs=1&amp;amp;hl=en_US&quot;&gt;&lt;/param&gt;';
                echo '&lt;param name=&quot;allowscriptaccess&quot; value=&quot;always&quot;&gt;&lt;/param&gt;';
                echo '&lt;embed src=&quot;http://www.youtube.com/v/' . $video-&gt;getVideoId() . '?fs=1&amp;amp;hl=en_US&quot; type=&quot;application/x-shockwave-flash&quot; allowscriptaccess=&quot;always&quot; allowfullscreen=&quot;true&quot; width=&quot;1000&quot; height=&quot;587&quot;&gt;&lt;/embed&gt;';
                echo '&lt;/object&gt;&lt;/p&gt;';
            }
            echo '&lt;div class=&quot;video-th&quot;&gt;';
            echo '&lt;ul&gt;';
            echo '&lt;li&gt;&lt;img id=&quot;video-img' . $video-&gt;getVideoId() . '&quot; src=&quot;http://i.ytimg.com/vi/' . $video-&gt;getVideoId() . '/hqdefault.jpg&quot; alt=&quot;' . $video-&gt;getVideoTitle() . '&quot; /&gt;&lt;/li&gt;';
            echo '&lt;li&gt;&lt;h3 id=&quot;video-title' . $video-&gt;getVideoId() . '&quot;&gt;' . $video-&gt;getVideoTitle() . '&lt;/h3&gt;&lt;/li&gt;';
            echo '&lt;/ul&gt;';
            echo '&lt;/div&gt;';

            $count++;
        }
    }

    getUserVideos('blendtec');

?&gt;
&lt;/div&gt;&lt;!--end restrictor--&gt;
&lt;h2 id=&quot;more&quot;&gt;See More Videos &gt;&gt;&lt;/h2&gt;


</div><!--end wrapper-->

<script src="js.js"></script>

</body>
</html>

var trigger = document.getElementById('more');
trigger.addEventListener('click', moveThumbs, false);
document.addEventListener('click', changeFea, false);


function moveThumbs(){
    var parentDiv = document.getElementById('restrictor'); //find the restrictor div
    var videoDivs = document.getElementsByClassName('video-th'); //create a node list of the div elements containing thumbnails
    for(var i = 0; i <= 4; i++){
        parentDiv.appendChild(videoDivs[0]); //one by one remove the first five divs and at them to the end
    }

}

function changeFea(e){
    var target = e.target.id;
    if(/video-img\S/.test(target)){
        var videoId = target.split(/(video-img)/);
        var videoTitle = document.getElementById('video-title' + videoId[2]).innerHTML;

        var newVid = '<object id="theplayer" width="1000" height="587"><param name="movie" value="http://www.youtube.com/v/' + videoId[2] + '?fs=1&amp;hl=enUS"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'  + videoId[2] + '?fs=1&amp;hl=enUS" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1000" height="587"></embed></object>';
        var feaVid = document.getElementById('restrictor').children[1];
        var feaVidTitle = document.getElementById('restrictor').children[0];
        feaVid.innerHTML = newVid;
        reaVidTitle.innerHTML = videoTitle;

}


}

wrapper {margin: 0 auto; width: 1020px; overflow: hidden;}

/Video Slider Styles/

restrictor { height: 900px; width: 9999px;}

.video-th {display: inline-block; height: 220; width: 200px; text-align: center; margin: 1px;}
.video-th ul {list-style: none; padding: 0; }
.video-th ul li {padding: 0;}
.video-th img {width: 180px; cursor:pointer;}

more {cursor: pointer;}