2012 – Embed Your YouTube Channel Into Your Website

Posted on by

YouTube API Player - Embed YouTube Channel into your websiteOver the years it seems YouTube has made it more and more difficult, or tricky shall we say to embed your YouTube channel into your website. It used to be a simple click here and click there and you’re off to the races. Lately, it’s a little more painful. I’ve spent countless hours scouring the internet for ways to accomplish this task only to find thousands upon thousands of articles covering older methods of doing this that do not work anymore. 

The other day I happened to stumble upon a great little website that offers the ability to edit  code directly online and get immediate feedback for how that code will render. The website I found is known by some and probably unknown to many. It is called JsFiddle and can be found at www.jsfiddle.net I encourage coders to head on over and check it out. It is a great little online testing environment.

The code I found was created by a Simone Gianni using the JsFiddle site to draft it up and test it out. He has two versions online on JsFiddle. One version just shows your channel in a typical YouTube API Player and the other shows your channel with a nifty sidebar / carousel displaying other videos from your YouTube channel. 

The sidebar / carousel version is the one that suits the needs for me and so I decided to go with that one. (I should also mention that the first version does not function in Internet Explorer).  I thought it could be improved upon, so I added in a little extra code to not only just display thumbnails of the other videos, but also display their title off to the right as illustrated below. The scripting includes CSS, Javascript based on JQuery 1.5.2 and very minimal HTML code to place the container DIV on your page.

Embedded YouTube API Player for your YouTube Channel

I’ve implemented this handy little widget of sorts on the home page of www.mentalwellnesstoday.com so that you can see it in action.

Know of any other cool JsFiddles? Share!

26 thoughts on “2012 – Embed Your YouTube Channel Into Your Website”

  1. I’m a little confused by the HTML option on that page. It looks a little small. I’m trying to simply cut and paste into the HTML area of my new WordPress.org site. The carousel option would be perfect for me. Could you help a newbie out? I was hoping for an option that would just involve plugging in my YouTube channel name.

    Reply ↓

  4. Hi guys. Jack, if you’d like to, send me an email and I’ll package up the files for you.

    The implementation of this is easier than it looks. On the JsFiddle page for this code there are 4 boxes, the HTML, Javascript/JQuery, CSS and the Demo – live view of the code in action.

    First and foremost, in the Javascript box / frame scroll to the bottom and change the User: “MagpieMedia1” to your YouTube user name.

    HTML: Place the content of the HTML box anywhere on your page where you would like the YouTube player to appear. Only include the DIV…./DIV portion, leave out the html and body tags as you’ll already have these tags on your page. They are only there to illustrate a complete, though very basic, HTML document.

    Javascript: The code inside this frame should be placed on your document between the head tags, or for a little more of an efficient HTML document, just before the closing body tag. The best thing to do to properly grab this code, is to right click inside the live view frame and choose This Frame > View Source (browser dependent) or a similar function for your internet browser. Then there are 2 things to copy to your HTML document;

    1) The call to the Jquery Library:

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js></script>

    2) The Javascript code itself:

    <script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
/*

    all the way down to and inlcuding:

    });//]]>  

</script>

    The Style content (the CSS) can either be placed in document between the head tags as it will appear in the Live View source code, or in an external style sheet with a reference to it in the head section.

    The code works by first retrieving the library of videos from your channel and collecting all required data (thumbnails, title etc…). It then begins to create the content within the [div id=”player”]… [/div] element on your page. It is very important that this div has the ID of “player” as the code explicitly looks for this element ID on the page to place the player inside of. The CSS also styles this based on the “player” ID.

    Hope this helps!

    Reply ↓

    • Hi

      I am a newbee too in html coding.

      I tried to follow instrucitons but i am messingup somewhere.
      Would it be possible for you to package me the html code with all the javascript and CSS in it ?

      Thanks in advance
      Dishcolala

      Reply ↓

    • Hi. Try the following instead:

      <html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by tcuttrissweb</title>
  
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
  
  <link rel="stylesheet" type="text/css" href="/css/normalize.css">
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  
  <style type='text/css'>
        #player {
    width: 580px;
    height: 280px;
    overflow: hidden;
    background: white;
    position: relative;
    border: solid 2px gray;
    padding: 5px;
}

.youtube .carousel {
    width: 230px;
    height: 100%;
    overflow: auto;
    position: absolute;
    right: 0px;
    z-index: 3;
}

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

.youtube iframe.player {
    width: 338px;
    height: 278px;  
    overflow: auto;
    border: 0;
}
.yt-descript {
    color: #000;   
    display:block;
    height:100px;
}
.carItemContain{
    width:;
    height:100px;
}


  </style>
  


<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
/*

/*
Copyright 2011 : Simone Gianni <simoneg@apache.org>

Released under The Apache License 2.0 
http://www.apache.org/licenses/LICENSE-2.0

*/

(function() {
    function createPlayer(jqe, video, options) {
        var ifr = $('iframe', jqe);
        if (ifr.length === 0) {
            ifr = $('<iframe scrolling="no">');
            ifr.addClass('player');
        }
        var src = 'http://www.youtube.com/user/YourBusinessOnl' + 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 + '"]');
        if (img.length !== 0) return;
        img = $('<img>');    
        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}}));
        });
    }
    
    var defoptions = {
        autoplay: false,
        user: null,
        carousel: createCarousel,
        player: createPlayer,
        thumbnail: createThumbnail,
        loaded: function() {},
        playopts: {
            autoplay: 0,
            egm: 1,
            autohide: 1,
            fs: 1,
            showinfo: 0
        }
    };
    
    
    $.fn.extend({
        youTubeChannel: function(options) {
            var md = $(this);
            md.addClass('yourbusinessonl');
            md.addClass('youtube-channel');
            var allopts = $.extend(true, {}, defoptions, options);
            allopts.maindiv = md;
            $.getJSON('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&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);
            });
        } 
    });
    
})();
        
$(function() {
    $('#player').youTubeChannel({user:'yourbusinessonl'});
});
//]]>
});//]]>  

</script>


</head>
<body>
  <html>
    <body>
        <div id="player">
        </div>
</body>
</html>
      Reply ↓

  7. Found the solution to my post above: Youtube limits are default 25 vids, but you can change it to 50 by adding: max-results=50

    In this line
    $.getJSON(‘http://gdata.youtube.com/feeds/users/’ + allopts.user + ‘/uploads?alt=json-in-script&format=5&callback=?&max-results=50’

    I’ll try to make a “load more videos” button in the end of the carousel should be possible…
    because you can load another 50 with: start-index=51&max-results=50
    I add I to this Danish travel site: http://www.albatros-travel.dk/omalbatros/albatrostv/Pages/Default.aspx
    Thanks again.

    Reply ↓

  8. Awesome code! Thanks!

    Would it be also possible to change the code to show a number of self defined videos, I mean to add a list of the video-IDs I wand to show, the first showing in the main window, the rest in the side bar?

    Thanks!

    Emil

    Reply ↓

  10. Good morning. This looks like the perfect solution to what I require but I am stumped as to how to make this word using a wordpress theme ?
    If it isnt too much hassle, could you please explain how to do this ? Many thnks

    Reply ↓

  14. This code is absolutely great Tom!
    I do have one question though.
    My original idea using this code was to load a channel and break thumbnails down into categories (tags). But I couldn’t find any documentation to built that, so I am now trying first to load my channel with all available videos, and then load every single category in a hidden div – by using /-/tag_name in the url as described in Youtube API docs. I am using a variable to store the different category names and then parse them into the $.getJSON url. First call goes fine (all videos), but all calls after that (using my variable) breaks.
    Any help would be appreciated. Thanks

    Reply ↓

  15. Hey! Great code and I find it really useful. But what should I change if I want to have fx the video frame in a column of my webpage and the carousel with the other videos in another column of the same page? like having them in two different divs. I’m trying to understand it but I’m not a JavaScript expert at all.
    Thank you for your help!

    Reply ↓

  18. This is great! One question though. I want to have two columns for the thumbnails so need to wrap the image and desc inside of a DIV I can float. Tried a couple of methods but nothing really works. Any help would be great.

    Reply ↓

  19. Here is a much easier way. Go an make a new playlist with every video you have. (select all check box) then make this play list private. play the play list. pause the video, Share the video, making sure the playlist option is selected. Click embedded link, copy past, change your width and high Bam! Done…

    Here is mine
    (FYI it’s my shitty travel blog, doesnt have to look pretty, just be easy for my family and friends to navigate and see whats up.. hence all the damn widgets.)
    http://jaredtravels.blogspot.jp/p/video-gallery.html

    Reply ↓

    • I would imagine so. There may be a way to interact with the API to do it, otherwise it would involve some conditionals such as if pageUrl = page1 channel=thischannel1 elseif pageUrl=page2 channel = thischannel2. Or if you had a series of channels and pages to factor, a switch statement would be more efficient.

      Either way you could build it as a function and call the function where the channel name is called in the Javascript. Just insert php tags and then echo the functions result.

      Reply ↓

Leave a reply to tcuttrissweb Cancel reply