YouPlay

A simple YouTube playlist with player that works with any responsive framework.

Requirements

To get started, you need a YouTube (v3) API Key.

In addition, you will need to include the following Javascript files:

• jQuery (1.9.1+)
• youplay.js

Usage

YouPlay will generate a playlist based on the markup structure that you provide.

Basic HTML Structure Example

<div data-youplay-playlist-id="" data-youplay-api-key="">
	<div data-youplay-player></div>
	<ul data-youplay-playlist-items>
		<li data-youplay-playlist-item>
			<h2 data-youplay-playlist-item-title></h2>
			<img data-youplay-playlist-item-thumbnail />
		</li>
	</ul>
</div>

That's it. There's no need to initialize or configure YouPlay with Javascript.

Required Data Attributes

These attributes need to be defined, self explanatory:

• data-youplay-api-key
• data-youplay-playlist-id

Optional Data Attributes

• data-youplay-autoplay

  false | true

• data-youplay-autonext

  true | false

• data-youplay-loop

  true | false

• data-youplay-mute

  false | true

  Must be set to true if autoplay is enabled.

• data-youplay-max-results

  50

• data-youplay-thumbnail-quality

  high | default

• data-youplay-callback

  null

  Please see Callbacks section below for more information.

• data-youplay-debug

  false | true

  If true, console logs and errors will output.

Optional Data Attributes (Presentation)

• data-youplay-active-class

  active

• data-youplay-player-class

  embed-responsive-item

Player Objects (DOM)

• data-youplay-player

  Replaced with YouTube Iframe

• data-youplay-playlist-title

• data-youplay-playlist-description

• data-youplay-playlist-items

  Playlist Item Container

  • data-youplay-playlist-item

    Playlist Item Template

Callbacks

• onError

  returns error

• onReady

  returns boolean, is autoplay

• onLoop

• onAutonext

  returns next item object

• onPlaylistItem

  returns current item object

• onFormat

  returns data to a function; named after the attribute to format

Example Callback Usage

We'll need to start by setting the callback name using the data attribute:

HTML

<div data-youplay-playlist-id="" data-youplay-api-key="" data-youplay-callback="example">
	...
</div>

Then create that callback with the methods you want to use:

Javascript

var example = {
	onReady: function(isAutoPlay){
		// Do something
	},
	onPlaylistItem: function(item){
		// Do something else
	},
	onFormat: {
		title: function(data){
			return 'Formatted Title: ' + data;
		}
		// Other attributes
	}
};

Notes

No assumptions are made about the design or presentation, but take a look at some of the examples to see it working with framework components.