create-youtube-player

Create Youtube Player

Create Youtube Player is a lightweight Javascript library to instanciate Youtube players, without any dependencies.

Installation

The libraryis available as the create-youtube-player package on npm.

npm install create-youtube-player --save

Demo

Online demo is available on the Create Youtube Player Github page.

How it works

HTML structure

The minimalist HTML structure below is enough to create the Youtube player.

Replace the {{idVideo}} with the video id from the Youtube url.
For example, idVideo is equal to uXLbQrK6cXw in the address below: https://www.youtube.com/watch?v=uXLbQrK6cXw

<div class="player" data-youtube-id="{{idVideo}}"></div>

Basic usage

Every page that contains a player, has to instanciates them. The following example create one item.

import YoutubePlayer from 'create-youtube-player'
const youtubePlayer = new YoutubePlayer();
youtubePlayer.loadAPI(() => {
    youtubePlayer.create({
        element: document.querySelector('.player')
    });
});

Custom theme

To customize the player with a poster, add a div tag inside the data-youtube-id element.

<div class="player" data-youtube-id="{{idVideo}}">
    <div class="player-poster">
      <img src="" alt="" />
    </div>
</div>

Options

You can pass configuration options to the constructor. Example below show all default values. Allowed values are as follows:

{
    multiplePlaying: true
}

• multiplePlaying - {Boolean} - Disable multiple player Youtube playing in the same time

Available methods

Each player instanciations returns the instance of the class with somes available methods to easily manipulate the element.

Create the player

The create() function create the Youtube player. The function need before to use the Youtube API.

If the Youtube API is already available, you can call the function directly. Else, call the create() function inside the loadAPI() callback function.

youtubePlayer.create({
    element: document.querySelector('.player')
});

Options

You can pass configuration options to the create() function.
Example below show all default values. Allowed values are as follows:

{
    element: null,
    width: '100%',
    height: '100%',
    playerVars: {
        'showinfo': 0,
        'modestbranding': 0,
        'autohide': 0,
        'rel': 0,
        'wmode': 'transparent',
        'controls': 1
    },
    selectors: {
        posterWrapper: '.player-poster'
    }
}

• element - {Object} - DOM element reference
• width - {String} - Width of the player (with unity)
• height - {String} - Height of the player (with unity)
• playerVars - {Object} - Parameters of the Youtube player
• selectors - {Object} - Configuration of selectors used by the library
  • posterWrapper - {String} - Selector of the poster wrapper

More informations about player parameters in the Youtube API documentation.

Load Youtube API

The loadAPI() function load the Youtube API.

youtubePlayer.loadAPI(() => {
    // Youtube API is ready
});

Callback functions

There are callbacks function available with the library.

Youtube player ready

The onPlayerReady function is called when the player is ready and instanciated.

youtubePlayer.create({
    element: document.querySelector('.player'),
    events: {
        onPlayerReady: (player) => {
            // Youtube player is ready
        }
    }
});

Parameters:

• player - {Object} - Youtube player instance

Youtube player state change

The onPlayerStateChange function is called when the player status changed.

youtubePlayer.create({
    element: document.querySelector('.player'),
    events: {
        onPlayerStateChange: (state) => {
            // Youtube player state changed
        }
    }
});

Parameters:

• state - {Object} - Youtube player state

Possible values of the state:

Value	Status
-1	not started
0	stop
1	playing
2	paused
3	buffering
5	queued

More informations in the Youtube API documentation.

Player poster click

The onPosterClick function is called when the poster is clicked.
There is a default behavior to play the video and hide the poster. Declaring this function will disable the default behavior.

youtubePlayer.create({
    element: document.querySelector('.player'),
    events: {
        onPosterClick: (e, player) => {
            // Poster is clicked
            e.target.style.display = 'none';
            player.playVideo();
        }
    }
});

Parameters:

• e - {Object} - Event listener datas
• player - {Object} - Youtube player instance