jQuery YouTube Plugin Back to Open Source Projects

Simple jQuery plugin designed to retrieve a listing of videos from YouTube based upon search terms.

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

<!-- include the library (assuming you've already included jquery) -->
<script type="text/javascript" src="jquery.youTube.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
   $('.youtube-videos').youTube({
	videoHeader : 'Call of Duty'
        /* if provided, will display a header above the video listings */
        ,results : 5
         /* number of results to return / display */
        ,orderBy : null
        /* what to order the results by */
        ,query : null
        /* what you are 'searching' youtube for */
        ,author : null
        /* author of the video, if you want to restrict results to a particular author */
        ,showRatings : true
        /* Display the rating stars assigns a class of 00,05,10,15,20,25,30,35,40,45,50 */
        ,showNumRatings : true
        /* Displays the actual number of ratings, ie: 10 ratings */
        ,showViews : false
        /* show number of views for the video, ie: 10 views */
        ,showDescription : true
        /* show a clipped version of the video description */
        ,descriptionLength : 150
        /* length of the description to bring back, will append ... to the end */
        ,thumbnail : 'small'
        /* small: 120x90 | large: 480 x 360 */
	});

    });
</script>
<div class="youtube-videos"></div>

More Examples

Get 10 videos about Call of Duty with a header called ‘Call of Duty Videos’

<script type="text/javascript">
   $(document).ready(function(){
       $('.youtube-videos').youTube({
               videoHeader: 'Call of Duty Videos'
               ,query: 'call of duty'
               ,results: 10
        });
    });
</script>

Get 5 videos about dogs with a no header and no description

<script type="text/javascript">
   $(document).ready(function(){
       $('.youtube-videos').youTube({
               showDescription: false
              ,query: 'dogs'
              ,results: 5
        });
    });
</script>

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…)