Youtube API calling player functions after player

Question

This is my first use of the youtube api and I'm finding it hard understanding the documentation. Basically I have multiple videos on the page, when you click one it pops up in a lightbox and plays the correct video. All of this works fine.

The client now wants all the videos to be automatically muted on start, and once you finish the video they want the frame to skip to the right place.

If I use the youtube iframe api i can't seem to be able to update the videoId at all. Below is my code:

var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '323',
        width: '576',
        videoId: 'Fy7Li0dMRSY',
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

function onPlayerReady(event) {
    event.target.mute(); // this does not do anything
    event.target.playVideo();
}

var done = false;
function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
        //setTimeout(stopVideo, 6000);
        done = true;
    }
}
function stopVideo() {
    player.stopVideo();
}


function loadVid(vidID, title){
    // loads youtube video with video title & youtube video ID
    $('.lightbox .title').html(title);
    $('.lightbox iframe').prop('src','https://www.youtube.com/embed/'+vidID+'?rel=0&wmode=transparent&enablejsapi=1');  
    //player.mute() does not work here  
    showLightbox(); 
}

My problem is trying to call the player function to mute inside the loadVid function, it throws back an error (any function throws the same error) and I can't figure out how to use functions such as player.

The error is player.stopVideo is not a function

So how can I mute the video on start? Adding it to onPlayerReady does not work either.

Answer 1

Move the event.target.mute(); to the onPlayerStateChange function like this:

var done = false;
function onPlayerStateChange(event) {
    event.target.mute();
    if (event.data == YT.PlayerState.PLAYING && !done) {
        //setTimeout(stopVideo, 6000);
        done = true;
    }
}

Answer 2

When you have multiple videos on the page, you still have to call onYouTubePlayerAPIReady for each one. You can pack all your player handlers in there at the same time, but depending on how you have to do it, that's not possible. Instead, you have to figure a way to trick the API. Take a look at my answer here loading multiple video players with youtube api