We recently completed a project for a customer that required the development of a custom video carousel to show their YouTube videos by category. We wanted a large hero Video on the page and a carousel of other videos in a scroll bar below. It needed to look something like this:
hero-1
We were surprised to not find one that was flexible enough to suit our design needs, so we decided to build our own.
To display the videos we used the awesome Slick carousel by Ken Wheeler. You can find it here.
Then we organized the clients videos into separate playlists in the YouTube manager. Doing this creates a unique key for each playlist that we could access. Here is a quick video that shows how to find a YouTube Channels playlist. The playlist ID is the string starting with PL.
To create the initial Hero Video we created a iframe to hold the video. We added controls=0 and shoinfo=0 to hide all of the YouTube controls overlay. Sadly its against YouTube’s use policy to remove the large play button.
[js]$(‘#hero’).html(‘’);[/js]
We created navigation buttons for each playlist at the top of the hero video and associated each with a playlist ID. If the tab is clicked, the event is captured and some javascript does an api call to the corresponding YouTube playlist. That looks something like this:
[js]
$(‘.tabs nav ul li a:not(:first)’).click( function(e){
e.preventDefault();
$(‘.tabs nav ul li’).removeClass(‘tab-current’);
$(this).parent(‘li’).addClass(‘tab-current’);
var htmlString = ”;
var htmlEmbed = ”;
var channelname = $(this).attr(‘href’).substring(1);
var ytapiurl =’https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&playlistId=’+channelname+’&key=”Your YouTube API key here”&maxResults=20′;
var requestAjax = $.ajax ({
dataType: ‘json’,
url: ytapiurl,
type: ‘GET’
});
requestAjax.done(getYouTubeData);
requestAjax.fail(showErrors);
[/js]
If the ajax request works, it then works through all the individual videos in the playlist. We then took those videos and stuffed each one into its own Iframe. But first we needed to change out the Hero video with the first video from the new list.
[js]
function getYouTubeData(data){
var arr = data.items;
var firstVid = arr[0].contentDetails.videoId;
htmlEmbed += ‘’;
$(‘#hero’).html(htmlEmbed);
[/js]
We then looped through the playlist and grabed each video individually, parsed its information and stuffed the results in its own div element. (The Slick Carousel uses div instead of List Items.)
[js]
for(var i = 0; i < arr.length; i++){
var snipid = arr[i].contentDetails.videoId;
var xtapiurl = ‘https://www.googleapis.com/youtube/v3/videos?part=snippet&id=’+snipid+’&key=”Your YouTube API key here”‘;
var requestAjax2 = $.ajax ({
dataType: ‘json’,
url: xtapiurl,
type: ‘GET’
});
requestAjax2.done(getVideoData);
requestAjax2.fail(showErrors);
function getVideoData(vid){
var vidEmbed = vid.items[0].id;
var vidTitle = vid.items[0].snippet.title;
var vidThumb2 = ‘http://img.youtube.com/vi/’+vidEmbed+’/0.jpg’;
var vidSrcUrl = ‘//www.youtube.com/embed/’+vidEmbed+”;
htmlString += ‘
‘;
[/js]
All those new divs then get stuffed into a parent div.
[js]
$(‘#videos’).html(htmlString + ‘
‘);
[/js]
Finally after a short wait for the DOM to finish loading we called the Slick Slider carousel and displayed all of the videos.
[js]
setTimeout(function(){
$(‘#videos’).show();
createSlider();
}, 1000);
[/js]
All in all it worked out very well. The finished product on the clients website can be viewed here.
