Youtube | Drafie's Design

A nice presentation of your Youtube channel

Feb 062014

Posted by Ciprian on 06/02/2014 How-To's Tagged with: jQuery, Suffusion, WordPress, Youtube 4 Responses »

Unfortunately Yahoo has deprecated the version 2 of their API and now only version 3 is accepted. In this new version we cannot retrieve data from a channel without authentication. So, for obtaining the same result as in my article is needed to write a WP plugin where you have to complete your Youtube API key, your Youtube channel ID… A lot of work for which I don’t have time and I don’t know if worth because there are a lot of plugins which already does that.

Few days ago, Brian Hayes ask on Suffusion Forum how can implement the above video gallery on his own site: www.classicalguitarorlando.com. I wanted to help him, but also I wanted to teach him to add himself the gallery. Because it was a very long discussion I decided to resume it now for those who wish to add this nice presentation of their own youtube channels. Because I really like Brian’s music, I used his channel for exemplification.

Is nothing more than to add a jQuery plugin as I presented often on this site. The original code was written by Simone Gianni on jsfiddle. I made 2 small changes:

1. The CSS code was changed as below, for filling the entire disponible width. This code need to be added in your stylesheet (at Suffusion Options -> Backend -> Custom Includes -> Custom Styles if you use Suffusion).

#player {
    width: 100%;
    height: 340px;
    overflow: hidden;
    background: #000;
    position: relative;
    border: solid 2px gray;
}

.youtube .carousel {
    width: 18%;
    height: 340px;
    overflow: auto;
    position: absolute;
    right:0;
    top:0;
    z-index: 3;
    color:#bbb;
}

.youtube .thumbnail {
    margin: 2px;
    width: 80%;
    border: 1px solid black;  
}

.youtube iframe.player {
    width: 80%;
    height: 340px;  
    overflow: auto;
    border: 0;
}

#player {

width: 100%;

height: 340px;

overflow: hidden;

background: #000;

position: relative;

border: solid 2px gray;

}

.youtube .carousel {

width: 18%;

height: 340px;

overflow: auto;

position: absolute;

right:0;

top:0;

z-index: 3;

color:#bbb;

}

.youtube .thumbnail {

margin: 2px;

width: 80%;

border: 1px solid black;

}

.youtube iframe.player {

width: 80%;

height: 340px;

overflow: auto;

border: 0;

}

2. I changed a little the javascript code for working with WordPress in noConflict mode:

jQuery.noConflict();
(function($) {
    function createPlayer(jqe, video, options) {
        var ifr = $('iframe', jqe);
        if (ifr.length === 0) {
            ifr = $('<iframe scrolling="no">');
            ifr.addClass('player');
        }
        var src = 'https://www.youtube.com/embed/' + video.id;
        if (options.playopts) {
            src += '?';
            for (var k in options.playopts) {
                src += k + '=' + options.playopts[k] + '&';
            }
            src += '_a=b';
        }
        ifr.attr('src', src);
        jqe.append(ifr);
    }

    function createCarousel(jqe, videos, options) {
        var car = $('div.carousel', jqe);
        if (car.length === 0) {
            car = $('<div>');
            car.addClass('carousel');
            jqe.append(car);

        }
        $.each(videos, function(i, video) {

            options.thumbnail(car, video, options);
        });
    }

    function createThumbnail(jqe, video, options) {

        var imgurl = video.thumbnails[0].url;
        var img = $('img[src="' + imgurl + '"]');
        var desc;
        var container;
        if (img.length !== 0) return;
        img = $('<img align="left">');
        img.addClass('thumbnail');
        jqe.append(img);
        img.attr('src', imgurl);
        img.attr('title', video.title);
        img.click(function() {
            options.player(options.maindiv, video, $.extend(true, {}, options, {
                playopts: {
                    autoplay: 1
                }
            }));
        });
        desk = $('<br /><p class="yt-descript">' + video.title + '</p>');
        jqe.append(desk);
        desk.click(function() {
            options.player(options.maindiv, video, $.extend(true, {}, options, {
                playopts: {
                    autoplay: 1
                }
            }));
        });
    }

    var defoptions = {
        autoplay: false,
        user: null,
        carousel: createCarousel,
        player: createPlayer,
        thumbnail: createThumbnail,
        loaded: function() {},
        playopts: {
            autoplay: 0,
            egm: 1,
            autohide: 1,
            fs: 1,
            showinfo: 1,
         wmode: 'transparent'
        }
    };


    $.fn.extend({
        youTubeChannel: function(options) {
            var md = $(this);
            md.addClass('youtube');
            md.addClass('youtube-channel');
            var allopts = $.extend(true, {}, defoptions, options);
            allopts.maindiv = md;
            $.getJSON('https://gdata.youtube.com/feeds/api/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&wmode=transparent&callback=?', null, function(data) {
                var feed = data.feed;
                var videos = [];
                $.each(feed.entry, function(i, entry) {

                    var video = {
                        title: entry.title.$t,
                        id: entry.id.$t.match('[^/]*$'),
                        thumbnails: entry.media$group.media$thumbnail
                    };
                    videos.push(video);
                });
                allopts.allvideos = videos;
                allopts.carousel(md, videos, allopts);
                allopts.player(md, videos[0], allopts);
                allopts.loaded(videos, allopts);
            });
        }
    });

})( jQuery );

$j=jQuery.noConflict();       
$j( document ).ready(function() {
    $j('#player').youTubeChannel({user:'BrianHayesAgentChan'});
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

jQuery.noConflict();

(function($) {

function createPlayer(jqe, video, options) {

var ifr = $('iframe', jqe);

if (ifr.length === 0) {

ifr = $('