jQuery YouTube Carousel

by

One of the sites I work on required a way to display YouTube videos on their site in a carousel like fashion. The biggest challenge that I had to look at was the coding language I could use. The site’s back-end end of does not allow for me to use PHP code, which is what I would have originally used to make this solution. Instead I took to the internet find a suitable Javascript/jQuery option and to my surprise there were none to be found.

I have done some work with embedding YouTube videos in the past so I figured I could make a slick jQuery plugin to insert code into a div on a page and provide the controls to switch between the videos. My goal was to make it so that all I would need to supply to file was the video ID list, video height, and video width. I combined what I created with jCarousel – Riding carousels with jQuery to form the plugin. This plugin is developed under the dual open source licenses from MIT and GPL.

View live example
Download the file for your own use
*Update: this project can now be found on my GitHub project page.

Once you download the file add the contents to your site. Make sure you include <link rel=”stylesheet” href=”path-to-css/youtubecarousel.css” type=”text/css”> to the head of the page and <script type=”text/javascript” src=”path-to-javascript/jquery.youtubecarousel.js”></script> to the footer of the page. You of course will need to include jQuery to the page in order for this to work. My suggestion is to grab the path file over at Google Libraries API and include that near the bottom of the page. Then all you have to do is place <div id=”yt_container”></div> somewhere in the body part of your document and everything should work for you.

Let me know of any problems or suggestions in the comments.

49 thoughts on “jQuery YouTube Carousel”

  1. Hi Michael,

    Thanks for posting this!

    Even in the example page, the navigation arrows in the carousel flake out in chrome quite a bit. For instance, getting to the end of the line going right eventually leads to a blank carousel. Click the left arrow jumps to the right before going left every time. In Firefox, the functionality is much smoother. Are there any plans for better Chrome support in the future?

    Thanks much!

    Jen

    Reply ↓

    • You can edit the jquery.youtubecarousel.js file and change the code under the /*jCarousel Code*/ comment. All of this code comes from a jQuery plugin called jCarousel and is inserted into the “#mycarousel” div.

      Reply ↓

  3. Hi there,

    Everything seems to be working besides the navigation.
    Currently, the thumbnails of the videos scroll across the bottom fine but when I click each thumbnail nothing happens.

    Almost like the onclick function is not being called or the <a href… isn't working.

    Any ideas?

    Reply ↓

  4. Pingback: Silverstripe – Module Creation « Patrick Bell NMIT

  5. On my page people are likely to miss the carousel if it is below the video. Would it be easy to put it above the video? I have made a few attempts, but don’t seem to be getting it right.

    Reply ↓

  8. Thank you for you plugin. It helped me a lot on some project i have to finish. Is there a way to automaticaly embed newly updated videos from the Youtube channel?

    It would be very cool if this plugin is fully automaticaly.
    I’ using it right now for some Social Media Newsroom.
    Greets from Germany

    Reply ↓

    • You would have to edit the JavaScript to not insert float: left. Then you would need to edit the CSS to change the div so it will not hide the rest of the list.

      Reply ↓

  10. Can i make the list of videos apper next to the video on the right as an horizontal list?

    I would appreciate any help regarding the same!

    Reply ↓

    • You have to apply a float:left to the yt_videosurround div and the yt_embededvideo div. You will also need to reduce the width of the videos and the yt_videosurround div.

      Reply ↓

  11. Hi there… im a newbie for jQuery.. i have a quick question, base on what you have developed is there anyway i can add a tooltips on the video thumbnails?

    Reply ↓

    • You could always add some code to watch the on hover event for each thumbnail and have it activate a hidden div. I’m sure there are more ways but that is what I can think of off the top of my head.

      Reply ↓

  16. Great work….! love this carousel, I want to ask on things that is that possible to add some heading or content about the video in thumbnails?

    Reply ↓

  19. What would be awesome for this plugin was the option to just type a channel instead of a list of videoclips. That way it would automatically update when new videos where uploaded. That would be insane. and maybe an option to order newest or oldest clips first. KICK ASS!!

    Reply ↓

  20. everything is working perfectly for me.
    Just wanna to ask is there way where we can show the text related to the each video above the videos gallery section………
    conatent should be related to the main window……showing as the videos changed the content should change………plz suggest
    thnx

    Reply ↓

  24. I am relatively new to this. Is there a way to get the video to play automatically? and can we stop you tube from showing relevant videos.

    Thank you.

    Reply ↓

    • Add this after the ? in the YouTube link during the html insert and it should start playing automatically:
      rel=0&autoplay=1&

      I’m not really sure there is a way for stoping YouTube from showing relevant videos.

      Reply ↓

  26. Is there a way to get this to work when the site is viewed on ipad/iphone. Current example above looks like it doesn’t.

    Reply ↓

    • Where the javascript sets the height and width, var yt_height = 419; var yt_width = 766;. If you created a script that determined the width and height allowable by whatever browser you are currently using you should be able to input those value here. There may be an easier way but that is what I can think of off the top of my head.

      Reply ↓

    • It would be pretty simple to add another array to the javascript that corresponds to the videos array. Then you could just add the output to where the HTML is outputted, jQuery(‘#yt_container’).html.

      Reply ↓

  28. how can we make it dynamic as well? What if I want to read the videos from a list or database? Right now the video ID is hardcoded in the JS file, what if I want to make it dynamic instead of static?

    Reply ↓

  31. Hello Michel,

    I want to fit the carrousel to the size of the screen.

    So at the beginning of jquery.youtubecarrousel.js I write :

    “Var iWindowsSize = $ (window) .width ();

    If (iWindowsSize = 692) {
    Var yt_height = 389;
    Var yt_width = 691;
    }

    If (iWindowsSize = 591) {
    Var yt_height = 331;
    Var yt_width = 589;
    }
    …”

    For the size of the video, it works but not for the carousel. I can not find how limite the size (width) of the carousel not to exceed the video, how can I do?

    thanks you.

    Reply ↓

    • All the width settings for the carousel can be found in the “youtubecarousel.css” file. Look for this line “.jcarousel-skin-tango .jcarousel-container-horizontal” it should be at or around line 26. The width property under this controls the carousel. You will need to modify this rule to include some media queries for different resolutions.

      Reply ↓

Leave a Reply to Jason Cancel reply

Your email address will not be published. Required fields are marked *