jQuery YouTube Plugin
Feb 1, 2010 Code, Web Dev, jQuery
I recently needed a quick way to pull back a listing of YouTube videos and show them in the sidebar of a site, being the incredible awesome person that I am I whipped it up as a quick plugin that I’m now releasing. This jQuery YouTube plugin is perfect for displaying YouTube video on a WordPress blog sidebar or just a general website site bar. It does not require any type of server side language (PHP, ColdFusion , Rails, etc…) so you can use it on any site, even basic HTML sites.Download:
Download as a zip or tar file from GitHub: jQuery YouTube Plugin zip/tar
Access the project repository on GitHub: jQuery YouTube GitHub Repository
How to Use:
The example that’s included in the download/GitHub repository should be enough to get you started but I’ll show an example that has all of configurable options in place (I’ve marked the required attributes in the code sample below). You can open the jquery.youTube.js file for this same listing
| HTML | | copy code | | ? |
| 01 | |
| 02 | <!-- include the library (assuming you've already included jquery) --> |
| 03 | <script type="text/javascript" src="jquery.youTube.js"></script> |
| 04 | <script type="text/javascript"> |
| 05 | $(document).ready(function(){
|
| 06 | $('.youtube-videos').youTube({
|
| 07 | videoHeader : 'Call of Duty' /* if provided, will display a header above the video listings */ |
| 08 | ,results : 5 /* number of results to return / display */ |
| 09 | ,orderBy : null /* what to order the results by */ |
| 10 | ,query : null /* what you are 'searching' youtube for */ |
| 11 | ,author : null /* author of the video, if you want to restrict results to a particular author */ |
| 12 | ,showRatings : true /* Display the rating stars assigns a class of 00,05,10,15,20,25,30,35,40,45,50 */ |
| 13 | ,showNumRatings : true /* Displays the actual number of ratings, ie: 10 ratings */ |
| 14 | ,showViews : false /* show number of views for the video, ie: 10 views */ |
| 15 | ,showDescription : true /* show a clipped version of the video description */ |
| 16 | ,descriptionLength : 150 /* length of the description to bring back, will append ... to the end */ |
| 17 | ,thumbnail : 'small' /* small: 120x90 | large: 480 x 360 */ |
| 18 | }); |
| 19 | |
| 20 | }); |
| 21 | </script> |
| 22 | <div class="youtube-videos"></div> |
| 23 |
More Examples
Get 10 videos about Call of Duty with a header called ‘Call of Duty Videos’
| HTML | | copy code | | ? |
| 01 | |
| 02 | <script type="text/javascript"> |
| 03 | $(document).ready(function(){
|
| 04 | $('.youtube-videos').youTube({
|
| 05 | videoHeader: 'Call of Duty Videos' |
| 06 | ,query: 'call of duty' |
| 07 | ,results: 10 |
| 08 | }); |
| 09 | }); |
| 10 | </script> |
| 11 |
Get 5 videos about dogs with a no header and no description
| HTML | | copy code | | ? |
| 01 | |
| 02 | <script type="text/javascript"> |
| 03 | $(document).ready(function(){
|
| 04 | $('.youtube-videos').youTube({
|
| 05 | showDescription: false |
| 06 | ,query: 'dogs' |
| 07 | ,results: 5 |
| 08 | }); |
| 09 | }); |
| 10 | </script> |
| 11 |
Notes
showRatings: will output an empty div with the css class shown above (inspect the outputted results with Firebug to see…) this will allow you to style up your ratings however you like (stars, thumbs, etc…)
Download:
Download as a zip or tar file from GitHub: jQuery YouTube Plugin zip/tar
Access the project repository on GitHub: jQuery YouTube GitHub Repository
CFSCRIPT Only Components
Mar 1, 2009 Code, Coldfusion, Web Dev
