Slick and Customizable jQuery Youtube Player Widget - Youtube TV
File Size: | 581KB |
---|---|
Views Total: | 14665 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.