Product and promotional videos can help ecommerce sites attract and convert more customers.
These powers of attraction and conversion are fueling demand from ecommerce merchants and, thereby, creating opportunities for ecommerce developers willing to insert video into a site renovation or revamp. Recently, we published "Part One" of this tutorial describing how to retrieve, parse, and display videos from a particular user's YouTube account.
That sort of solution will work great if a merchant is hosting videos on YouTube and then displaying them on site. The example built in that first tutorial, placed all of the videos on page in a great big, long line.
In the second installment of this tutorial, I am going to describe how to feature the most recent video and get thumbnail images of the other videos from YouTube. The step numbers below pick up where the first tutorial left off.
Step No. 6: Add a Counter and Create a Featured Video
I want treat the videos coming from YouTube differently depending on how old they are. Since the first video in the data set will be the most recent video, I am going to "feature" it, meaning that it will load as a Flash player with the video in place. Subsequent videos will only show up as thumbnails, but more about those in the next step.
For this step, I need to identify the section of my PHP file that looks like the following.
function manageVidFeed($videos){
foreach($videos as $video){
echo '<h3>' . $video->getVideoTitle() . '</h3>';
echo '<p><object id="theplayer" width="1000" height="587">';
echo '<param name="movie" value="http://www.youtube.com/v/' . $video->getVideoId() . '?fs=1&hl=en_US"></param>';
echo '<param name="allowscriptaccess" value="always"></param>';
echo '<embed src="http://www.youtube.com/v/' . $video->getVideoId() . '?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1000" height="587"></embed>';
echo '</object></p>';
}
}
This function iterates through a YouTube user's list of uploaded videos, placing the title of each video inside of an h3 tag and using a series of echo statements to build an object and an embed tag. Notice that I am using the YouTube API to place each video's id where appropriate.
But again, this code embeds each and every video a user has uploaded to YouTube. I am going to start by changing this function so that only the most recent video is embedded on the page.
To do this, I add an iteration variable that I can use as a sort of counter. This variable will be introduced before my foreach statement begins.
$count = 1;
Next, I add a conditional statement that is only true if the $counter variable is set to "1." This conditional statement is wrapped around the echo statements that place the player on page.
if($count == 1){
echo '<h3>' . $video->getVideoTitle() . '</h3>';
echo '<p><object id="theplayer" width="1000" height="587">';
echo '<param name="movie" value="http://www.youtube.com/v/' . $video->getVideoId() . '?fs=1&hl=en_US"></param>';
echo '<param name="allowscriptaccess" value="always"></param>';
echo '<embed src="http://www.youtube.com/v/' . $video->getVideoId() . '?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1000" height="587"></embed>';
echo '</object></p>';
}
With the conditional statement in place, I add "1" to the $counter variable.
$count++;
As a result, the first time that PHP iterates through the YouTube data, $counter is set to "1," making the conditional statement true and placing the video player on page. But on the second pass through $counter is set to "2" and the conditional statement returns false, so that the player is not embedded. Put another way, the code will only place a single video—the most recent video—on the page.
Step No. 7: Create Thumbnails for Subsequent Videos
If I had only wanted one video on page, it probably would have been easier to cut and paste it directly from YouTube—except of course this page will update any time the user adds a new video and a cut and paste job would have to be manually updated—but I am not going to stop with one video. Rather, I am going to add thumbnails and titles to represent the rest of the videos.
To achieve this, I need a new statement in my PHP just after the end of the conditional statement created above and just before adding to the $counter variable.
echo '<div class="video-th">'; echo '<ul>'; echo '<li><img id="video-img' . $video->getVideoId() . '" src="http://i.ytimg.com/vi/' . $video->getVideoId() . '/hqdefault.jpg" alt="' . $video->getVideoTitle() . '" /></li>'; echo '<li><h3 id="video-title' . $video->getVideoId() . '">' . $video->getVideoTitle() . '</h3></li>'; echo '</ul>'; echo '</div>';
I have written this code as a series of echo statements in the hope that it will be more readable. In the actual application, I would only really need a single echo statement that included all of the above.
The PHP creates a div element with the class name of "video-th" for each and every video our YouTube user has posted on YouTube. Each of these div elements includes an unordered list with exactly two list items.
These list items include an image and a title. Notice that I am again using helpers $video->getVideoId() to construct a URL. This time that URL is the src for a thumbnail image.
Once published on the page, the image src will look something like the following, wherein "Dd-JJTs2aKU" is the video id retrieved from YouTube and placed in the HTML by my PHP script.
http://i.ytimg.com/vi/Dd-JJTs2aKU/hqdefault.jpg
The resulting page includes my featured video and a number of video thumbnails and title arranged in a big, long line.
Summing Up
In this tutorial, I described how to add a conditional statement and thereby create a featured or most recent video, and I explained how to get thumbnail images for subsequent videos in the YouTube feed.
In the next installment in this series, I will use CSS and JavaScript to make my thumbnail images more presentable.
Related Articles
- Add Video with YouTube API and PHP Client Library, Part One
- “Video for Everybody” Gracefully Degrades
- Hover-to-Play Ecommerce Videos with HTML5, CSS, and JavaScript
