jQuery Youtube plugins
Okay, So let's see some of the jQuery YouTube plugins.
TubePlayer Plugin
This jQuery plugin makes use of YouTube API and provides most of the function that is required. Along with the SWFObjects, this plugin takes advantage of HTML5 where possible. A new attribute iframed can be set to true or false depending on whether the iframe player should be prioritized. SWFObject is not strictly a requirement anymore, however TubePlayer has been created such that if the browser does not support HTML5 video, the flash player will be used instead. This plugin allows following functionalities,
- Play: the player & a specific video
- Pause the player
- Stop the player
- Seek to a particular point within a video
- Mute and Unmute the player & learn if the player is muted
- Get and set the volume of the player
- Get and set the video quality
- Destroy the player
- Friendly functions for player state changes --
- onPlayerUnstarted
- onPlayerEnded
- onPlayerPlaying
- onPlayerPaused
- onPlayerBuffering
- onPlayerCued
Popup Player Plugin
This is an easy to use jQuery Plugin to embed YouTube videos on your page by displaying them in a popup dialog box. This is plugin is very simple to configure and use. YouTube Video Id can be stored in any attribute of the DOM element. This plugin keeps track of all the assigned popup events and won't assign the click event if there already exists one, that way you can reassign the event for dynamically added HTML elements without affecting the existing ones.
You can easily configure YouTube video settings from the configuration options which are an extension of YouTube Embedded Player Parameters, letting you to customize your own video size and player setting. Videos are embedded through the new iframe embed code style which supports both Flash and HTML5 players.
YouTube Chromeless Video Plugin
A jQuery plugin to hook into the YouTube Chromeless Video API. The functionality is pretty simple: you get a play/pause button, a status bar, and a mute/unmute button; but this plugin gives you control over how those things look.
//Code Starts
<a href="http://www.youtube.com/watch?v=sxUjB3Q04rQ" class="video">Bolt Arms</a>
//jQuery code is
$(document).ready(function() {
$('a.video').ytchromeless();
});
//Code Ends
It is important that the URL to your video is formatted like the example above because the plugin grabs the video ID out of the URL, and then replaces the link with a video player.
Here are all of the options with their defaults:
- videoWidth : '640'
- videoHeight : '360'
- videoIdBase : 'ytplayer'
- params : { allowScriptAccess: 'always', wmode: 'transparent' }
jYouTube - jQuery YouTube Thumbnail Plugin
This plugin takes any YouTube video URL or video ID as first parameter and thumbnail size (big or small) as the second parameter and returns that video’s screenshot URL.
//Code Starts
// Returns big screenshot by video id
$.jYoutube('rSUfWXcNAOw');
// Returns small thumbnail by YouTube video URL
$.jYoutube('http://www.youtube.com/watch?v=rSUfWXcNAOw', 'small');
//Code Ends
Feel free to contact me for any help related to jQuery, I will gladly help you.
