create-youtube-player

    2.0.4 • Public • Published

    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

    Install

    npm i create-youtube-player

    DownloadsWeekly Downloads

    6

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    18 kB

    Total Files

    7

    Last publish

    Collaborators

    • yoriiis