V3 API vdid list not clickable

I have the same issue. I’ve looked into it and I’ve written a fix.

In js/yppv3-main.js, delete the following code at the end of the file:

/**
 * Change YouTube video based on playlist selection
 */
document.querySelector('.yt-api-video-item').addEventListener('click', function () {
    var ytUri = 'https://www.youtube.com',
        thisId = this.dataset.id;

    document.getElementById('vid_frame').src = ytUri + '/embed/' + thisId + '?autoplay=1&rel=0&showinfo=1&autohide=1';
});

Add the following after the forEach loop that adds each video to the page (after line 23):

/**
 * Change YouTube video based on playlist selection
 */
var videoNode = document.querySelectorAll('.yt-api-video-item');
for (var i = 0; i < videoNode.length; i++) {
    videoNode[i].addEventListener('click', function() {
        var ytUri = 'https://www.youtube.com';
        document.getElementById('vid_frame').src = ytUri + '/embed/' + this.dataset.id + '?autoplay=1&rel=0&showinfo=1&autohide=1';
    });
}

The issue is caused by trying to assign an event listener to each thumbnail before the the thumbnails have been loaded. This code reorganises the logic to add event listeners after thumbnails have been created.

• This reply was modified 6 years, 7 months ago by capitalt.
• This reply was modified 6 years, 7 months ago by Jan Dembowski.