As an ecommerce developer, you have an opportunity to improve your client's business by integrating video, which is a key contributor to sales conversions.
For the past couple of weeks—in "Part One" and "Part Two" of this tutorial series—I have described how to use the Google Gdata PHP client library to get a specific user's videos and dynamically place those videos on an HTML page. I also demonstrated how to use a counter to manage the most recent YouTube video differently than other videos in the feed.
In this "Part Three" of the series, I will be using CSS to make my video page look a bit more presentable. Below is a screen shot of how the video page looks when I start adding the style.
Add Basic Page Structure
My first bit of CSS is so basic that I am tempted to skip it. But for the sake of providing a complete tutorial I am going to quickly provide the code. As you will see, I center the videos, remove the "bullets" from my unordered list, and place the container div elements inline rather than displaying them as vertical blocks.
To make my CSS work, I also need to add a pair of containers to my HTML file. Here is the modified HTML (and PHP).
<?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';
Zend_Loader::loadClass('Zend_Gdata_YouTube');
function getUserVideos($username){
$yt = new Zend_Gdata_YouTube();
manageVidFeed($yt->getuserUploads($username));
}
function manageVidFeed($videos){
$count = 1;
foreach($videos as $video){
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>';
}
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>';
$count++;
}
}
getUserVideos('blendtec');
?>
</div><!--end restrictor-->
</div><!--end wrapper-->
</body>
</html>Now for the first, rudimentary CSS declarations.
#wrapper {margin: 0 auto; width: 1020px;}
.video-th {display: inline-block;}
.video-th ul {list-style: none;}
Contain the Unordered List
Next, I want to limit the number of videos the site visitor sees at once and provide a mechanism to sort through those videos.
To achieve this, I set up a simple content slider. This slider uses the restrictor element to display the video thumbnails as a long horizontal row.
#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;}
The key things to notice include the addition of an "overflow" description to the wrapper element, the set height and width for the restrictor element, and the one pixel margin on the video-th element.
The "overflow" declaration effectively hides any video thumbnails that do not fit within the page's 1,020 pixel width.
The restrictor element's height declaration is just tall enough for the main video and one row of video thumbnails beneath it. The width element gives the other (hidden) video thumbnails somewhere to go.
Finally because my page is 1,020 pixels wide, I used the margin declaration of the video-th element to ensure that only five thumbnails appeared on page at a time.
Summing Up
My video gallery now looks a lot more like what many Internet users have come to expect. The five video thumbnails are neat and clean. The main video is well placed. But unfortunately, the remaining thumbnails are out of view. So in the next part of this tutorial series, I will be adding a content slider to let users browse the available videos.
Related Articles
- Add Video to Your Project with YouTube API and PHP Client Library, Part Two
- Add Video with YouTube API and PHP Client Library, Part One
- Hover-to-Play Ecommerce Videos with HTML5, CSS, and JavaScript
