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.
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
Which version of Chrome are you using? I do all my testing in Chrome and can not replicate.
Is there any way to disable the prev / next buttons in the carousel?
Thanks much!
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.
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?
Pingback: Silverstripe – Module Creation « Patrick Bell NMIT
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.
Use this JavaScript file instead Click Here. I just moved the
to the front of the jQuery html insert. That should take care of it and you should see the carousel part on top. Hope that helps!
Great, that worked. Thanks!
One thing that would help is to have an optional delimited string that would be used as a captions for the thumbnails. Sometimes thumbnails are small, so it is hard to tell what or who they are. I hardcoded them at http://www.lagunatemplehills.com/Pages/candidateforum.html
I’m looking for an Ooyala version. I have most of the code, but could I work with you to finish this?
I’m afraid I would not be much help, I know nothing about Ooyala.
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
Great one! Helps a lot! Thank u!
how can we make the Carousel vertical?
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.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!
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.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?
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.
Hello! Is there any way to change the style of the video player for the new YouTube’s video style?
Thanks!
None that I have developed. I am just using the stock YouTube video player. If you have a look here http://support.google.com/youtube/bin/answer.py?hl=en&answer=178264 YouTube outlines ways to stylize the player.
Hey there. Awesome Plugin, THANKS!
Just wondering if it’s possible to embed Vimeo video’s as well?
This is great! I was having an issue in chrome where the title when sliding up would beging to jitter and or the player slider but setting wmode=”” fixed the issue. I hope to build on this.
Nice carousel. Thank you for sharing.
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?
This is great! however, would i be able to change it from specific videos to a channels latest uploads?
Nice job ! Thanks !
Anyway did you encounter, while working on local, some errors messages related to cross domains ? I added the JS and HTML codes and it returns something like :
“Unsafe JavaScript attempt to access frame with URL http://localhost:4000/ from frame with URL http://www.youtube.com/embed/xxxxxxxxxx. Domains, protocols and ports must match.”
I did notice the error a few days ago and it seemed to deal with the content coming from YouTube. As of today I no longer see this error, do you?
True ! it works well today ! x1000 thanks 🙂
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!!
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
This was just what I was looking for, but YouTube is showing the thumbnail that it chose rather than the one I picked?
Ok I fixed the thumbnail problem by changing the /2 to /0 in the img. Apparently /0 is the chosen thumbnail.
Great app, so easy to implement. Thank you.
For an enhancement, I would like to have the cursor placed over the picture identify its title. Thanks.
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.
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.
Thanks Michael. Exactly what I was looking for!
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.
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.Is there a way to add text under the thumbnail of the video?
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.
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?
Just do an ajax call in the javascript file to get the value from elsewhere, should be relatively easy. I’m not sure of what code you are comfortable with and what you are using as a database or else I could give some suggestions.
Is there away I can use the Playlist ID so it will be dynamic from youTube?
Did you find a way to make it work with a youtube playlist?
Hello Michel,
In ie7&8 its not working, video not showing,
video thumbnail carousel is working fine..
please help!
can you figure out how it works?
http://stackoverflow.com/questions/19385406/how-to-advance-to-next-slide-after-video-in-bootstrap-carousel
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.
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.