How to Control YouTube's Video Player with JavaScript

YouTube has become the standard way for delivering high quality video on the web. Sometimes, when you embed a video in your web application or landing page, you need a great deal of control on what and how is displayed. This is why we are going to show you how you can use the YouTube JavaScript Player API.

Initializing the player

The first step is to add a placeholder for the player and include the YouTube API.

<div id="video-placeholder"></div>

<script src="https://www.youtube.com/iframe_api"></script>

When the API is fully loaded, it looks for a global function called onYouTubeIframeAPIReady() which you should define. Inside it we will create a new instance of YouTube player. The first argument is the id of an HTML element we want to be replaced by the player, in our case that's video-placeholder. The second one is an object containing the player options:

• The width and height of the player. These can be overwritten by applying CSS to #video-placeholder.
• The id of the video we want to be embedded when the player loads. You can get this id from any YouTube link by taking the string after ?v= (e.g. youtube.com/watch?v=WwoKkq685Hk)
• The playerVars object is a set of parameters. We made the color of the player white and created a playlist by providing two additional videos ids, separated by a coma. You can see a list of all available properties here.
• The events object consists of event listeners and the functions they call. The API passes down an event object as the only attribute, containing the target and data. You can read more about events here.

The whole code look something like this:

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        videoId: 'Xa0Q0J5tOP0',
        playerVars: {
            color: 'white',
            playlist: 'taJ60kskkns,FG0fTKAqZ5g'
        },
        events: {
            onReady: initialize
        }
    });
}

The initialize() function will be called when the player fully loads. It will start an interval, updating some of our controls every second.

function initialize(){

    // Update the controls on load
    updateTimerDisplay();
    updateProgressBar();

    // Clear any old interval.
    clearInterval(time_update_interval);

    // Start interval to update elapsed time display and
    // the elapsed part of the progress bar every second.
    time_update_interval = setInterval(function () {
        updateTimerDisplay();
        updateProgressBar();
    }, 1000)

}

Displaying current time and video duration

This is done by the updateTimerDisplay(), one of the function called every second. It takes advantage of the API's methods to give us adequate information about the video length.

// This function is called by initialize()
function updateTimerDisplay(){
    // Update current time text display.
    $('#current-time').text(formatTime( player.getCurrentTime() ));
    $('#duration').text(formatTime( player.getDuration() ));
}

function formatTime(time){
    time = Math.round(time);

    var minutes = Math.floor(time / 60),
    seconds = time - minutes * 60;

    seconds = seconds < 10 ? '0' + seconds : seconds;

    return minutes + ":" + seconds;
}

Methods are called using the player object we created in the begging. We can get how many seconds into the video we are in with getCurrentTime(), and the total duration of the video with getDuration(). Both function will return second which we format correctly to look like time and then write into the DOM.

Progress Bar

This is done using the player.seekTo(sec) function, which jumps the video to the seconds provided in the parameter.

To demonstrate this we've made our own version of YouTube's progress bar, using an input field of type range. When we click anywhere on it, we take the inputs value, witch gives us a percentage. We then use this percentage to calculate what progress we want made to the video and skip to the according seconds.

$('#progress-bar').on('mouseup touchend', function (e) {

    // Calculate the new time for the video.
    // new time in seconds = total duration in seconds * ( value of range input / 100 )
    var newTime = player.getDuration() * (e.target.value / 100);

    // Skip video to new time.
    player.seekTo(newTime);

});

The code above allows us to control the video, but we also want the progress bar to move automatically as the video progresses. To understand how we do this, go back to the initialize() function and more specifically its every-second interval and updateProgressBar().

// This function is called by initialize()
function updateProgressBar(){
    // Update the value of our progress bar accordingly.
    $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}

Playback Controls

Nothing out of the ordinary here. Just make two buttons and call the needed method on click.

$('#play').on('click', function () {
    player.playVideo();
});

$('#pause').on('click', function () {
    player.pauseVideo();
});

Sound Options

We can create a mute toggle button using the provided getter and setter methods of the player.

$('#mute-toggle').on('click', function() {
    var mute_toggle = $(this);

    if(player.isMuted()){
        player.unMute();
        mute_toggle.text('volume_up');
    }
    else{
        player.mute();
        mute_toggle.text('volume_off');
    }
});

If we want to set the volume using a percentage we can use a number input field and the setVolume() method. It will automatically validate the provided parameter, so we don't have to worry about passing it floating values or numbers out of the [0 : 100] interval.

$('#volume-input').on('change', function () {
    player.setVolume($(this).val());
});

Other Player Settings

Changing Playback Speed

The player.setPlaybackRate() method expects one of the following as its parameter:

• 0.25
• 0.5
• 1
• 1.5
• 2

Create a <select> element in the HTML and set the speeds as it <option> children. User interaction with the select will result in change of the speed rate only for the currently playing video and will be reset to the default (speed of 1) when the next one starts.

$('#speed').on('change', function () {
    player.setPlaybackRate($(this).val());
});

Changing Video Quality

Altering the video quality works in a very similar way to altering the speed. The method for this is setPlaybackQuality() and the argument it expects is one of these strings:

• highres
• hd1080
• hd720
• large
• medium
• small

Note that this function only suggest what quality should be used as that highly depends on the internet connection and video itself.

$('#quality').on('change', function () {
    player.setPlaybackQuality($(this).val());
});

Playlists

We can play the next or previous video in a playlist using these methods form the API.

$('#next').on('click', function () {
    player.nextVideo()
});

$('#prev').on('click', function () {
    player.previousVideo()
});

If you want to play a specific video from the playlist, use player.playVideoAt(index), where index is an integer specifying which video to play, 0 being the first one.

Queue Video Dynamically

The last thing we are going to demonstrate, is how to dynamically add new videos to the player. If you check our our demo, in the bottom you'll see three thumbnails for cat videos. We added their YouTube links as data-attributes and when any of them gets clicked, the chosen video will be loaded into the player.

$('.thumbnail').on('click', function () {

    var url = $(this).attr('data-video-id');

    player.cueVideoById(url);

});

Conclusion

This wraps up our tutorial! We hope that you found this tutorial useful. If you wish to learn more about the YouTube API, check out these resources:

• YouTube Iframe Player API Reference - here.
• YouTube Player supported parameters - here.
• YouTube Developers Live: Embedded Web Player Customization - here.