YouTube (“script”) inside the coverClickHandler function

JavaScript
1

I’m trying to get the videos to play with (“script”) inside the coverClickHandler function.

How would I be able to get it to work?

Doing this allows for the api not to load until it is clicked.

I almost got it working here. Not all the videos play when each is clicked on.

Only 2 players are able to load.

How is that fixed?

https://jsfiddle.net/4ymf9n8h/

(function manageCover() {

    function hide(el) {
        el.classList.add("hide");
    }

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
        const tag = document.createElement("script");
        tag.src = "https://www.youtube.com/player_api";
        const firstScriptTag = document.getElementsByTagName("script")[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    }

    const covers = document.querySelectorAll(".jacket");
    covers.forEach(function (cover) {
        cover.addEventListener("click", coverClickHandler);
    });
}());
2

That script code should only ever be run once.

3

I understand that, but the way it is set up, only 2 videos are able to start, would a third one be able to start also, or that is not possible?

4

No, you do not understand that.

Right now you are trying to load the player_api script code each time a cover is clicked. That script code cannot load more than once. Trying to do it more than once is similar to buying a new car to take a trip down to the shops, and you only have room for one car.

It’s only possible for that script to properly load once. What you are doing is bloody stupid. Stop doing that.

5

Which is probably why it only works like that when only 1 player is being used.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.