YoutubeTV

A small, slick, library independent YouTube User/Playlist player

Features

• Library Independent
• Customizable via CSS
• Autoplay
• Remove YouTube Chrome
• Supports Playlists and Users
• jQuery Support
• Module Support

Demos

• Default Player Options
• Chromeless Player
• Playlist Support
• Full Screen Player (Good for a .tv website?)
• jQuery Support

Installation

Include both the ytv.css and ytv.js in your HTML file and you are good to go.

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

Usage

After your page has loaded, you may call the script like so:

var controller = new YTV(element, {
	user: 'YoutubeUsername'
});

YTV accepts two parameters. The first is a string of the element ID you want to use as the player, OR it may the element itself. The second parameter is an object of options defined below:

Settings and Defaults

settings = {
    element: null,
    user: null,
    playlist: '',
    fullscreen: false,
    accent: '#fff',
    controls: true,
    annotations: false,
    autoplay: false,
    chainVideos: true,
    browsePlaylists: false,
    wmode: 'opaque',
    events: {
        videoReady: function(){},
        stateChange: function(){}
    }
}

• element: The element or element ID to apply the YouTube TV Player to
• user: (String) The Username of the YouTube user you want to display videos from
• playlist: (String) The Playlist ID you would like to load (Overrides user)
• browsePlaylists: (Boolean) If true and the specified user has YouTube playlists, they will be accessible in the player by clicking the users Username
• fullscreen: (Boolean) If true, the player will take up all the available space on the users browser screen
• accent: (String) A CSS color string to apply to the accents of the player
• controls: (Boolean) If false, the normal YouTube controls will be hidden.
• annotations: (Boolean) If false, the annotations from the YouTube video will be hidden
• autoplay: (Boolean) If true, the first video in the list will automatically play once the player has loaded
• chainVideos: (Boolean) If true, the next video in que will automatically play after the current video has completed
• wmode: (String) Sets the Window Mode property for transparency, layering, and positioning in the browser. Values can be: window - movie plays in its own rectangular window on a web page. opaque - the movie hides everything on the page behind it. transparent - the background of the HTML page shows through all transparent portions of the movie, this may slow animation performance.
• events: The respective events will fire when key actions in the player have been called

Public Methods

destroy

Destroys the YouTube TV Player and all associated elements/events

controller.destroy();

fullscreen.state()

Returns true if in Fullscreen Mode

controller.fullscreen.state();

fullscreen.enter()

Enters into Fullscreen Mode

controller.fullscreen.enter();

fullscreen.exit()

Exits Fullscreen Mode

controller.fullscreen.exit();

jQuery Support

YTV may be used as a jQuery plugin in the following fashion:

$('#frame').ytv({opts});

Licensing

MIT Licensing

Share Meh!