Slick and Customizable jQuery Youtube Player Widget - Youtube TV

File Size: 581KB
Views Total: 14619
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Slick and Customizable jQuery Youtube Player Widget - Youtube TV

Youtube TV is a slick, lightweight and easy-to-use jQuery plugin for creating a customizable Youtube Player widget on your website. It supports auto play, fullscreen, user, and play list.

How to use it:

1. Include Youtube TV CSS file in the header of your page

<link href="src/ytv.css" type="text/css" rel="stylesheet" />

2. Create a container for your youtube widget

<div id="demo"></div>

3. Include jQuery library and jQuery Youtube TV plugin on the page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="../src/ytv.js"></script> 

4. Call the plugin with options

<script>
$(window).load(function(){
$('#demo').ytv({
user: 'streetleague', // The Username of the YouTube user you want to display videos from
accent: '#d51c18' // A CSS color string to apply to the accents of the player
});
});
</script>

5. All the options

<script>
$(window).load(function(){
$('#demo').ytv({
element: null, // The element or element ID to apply the YouTube TV Player to
user: null, // The Username of the YouTube user you want to display videos from
playlist: '', // The Playlist ID you would like to load
fullscreen: false, // fullscreen
accent: '#fff', // A CSS color string to apply to the accents of the player
controls: true, // Show or hide youtube controls
annotations: false, // Show or hide the annotations from the YouTube video
autoplay: false, // autoplay
chainVideos: true, // If true, the next video in que will automatically play after the current video has completed
browsePlaylists: false, //  If true and the specified user has YouTube playlists, they will be accessible in the player by clicking the users Username
events: { // he respective events will fire when key actions in the player have been called
videoReady: function(){},
stateChange: function(){}
}
});
});
</script>

More examples:


This awesome jQuery plugin is developed by jakiestfu. For more Advanced Usages, please check the demo page or visit the official website.