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.