Questions about the YouTube player_api code


#21

Like this?
https://jsfiddle.net/hzyrfkwb/338/


    function init(opts) {
        var playerVars = opts.playerVars || {};
        if (!window.YT) {
            load.js("https://www.youtube.com/player_api").then(function() {
                YT.ready(function() {
                    addVideo(opts.video, playerVars);
                });
            });
        } else {
            addVideo(opts.video, playerVars);
        }
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        if (!window.YT) {
            load.js("https://www.youtube.com/player_api").then(function() {
                YT.ready(function() {
                    initPlayer(wrapper);
                });
            });
        } else {
            initPlayer(wrapper);
        }
    }

#22

No. I think you need to go back to working code, and start again, more carefully this time.


#23

This gets replaced with what?

    function initPlayer(wrapper) {
        videoPlayera.init({
            video: wrapper.querySelector(".video")
        });
    }

This gets replaced with what?

  function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        if (!window.YT) {
            load.js("https://www.youtube.com/player_api").then(function() {
                YT.ready(function() {
                    initPlayer(wrapper);
                });
            });
        } else {
            initPlayer(wrapper);
        }
    }

#24

Incorrect. The initPlayer function does not get replaced at all.


#25

I’m replacing this:

function coverClickHandler(evt) {


#26

With this?

    function init(opts) {
        var playerVars = opts.playerVars || {};
        if (!window.YT) {
            load.js("https://www.youtube.com/player_api").then(function() {
                YT.ready(function() {
                    addVideo(opts.video, playerVars);
                });
            });
        } else {
            addVideo(opts.video, playerVars);
        }
    }

#27

No, the clickhandler function does not get replaced with the init function.


#28

You told me this though:

Incorrect. The initPlayer function does not get replaced at all.


#29

What gets replaced then?


#30

Yes, that’s right. The initPlayer function is a very different thing from the videoPlayer init function.


#31

What happens with the.

coverClickHandler

https://jsfiddle.net/hzyrfkwb/340/


 function init(opts) {
        var playerVars = opts.playerVars || {};
        if (!window.YT) {
            load.js("https://www.youtube.com/player_api").then(function() {
                YT.ready(function() {
                    addVideo(opts.video, playerVars);
                });
            });
        } else {
            addVideo(opts.video, playerVars);
        }
    }
    return {
        init
    };
}());

function loadPlayer(containerSelector, playerVars) {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function initPlayer(wrapper) {
        videoPlayer.init({
            video: wrapper.querySelector(".video"),
            playerVars
        });
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        if (!window.YT) {
            load.js("https://www.youtube.com/player_api").then(function() {
                YT.ready(function() {
                    initPlayer(wrapper);
                });
            });
        } else {
            initPlayer(wrapper);
        }
    }
    const cover = document.querySelector(containerSelector);
    cover.addEventListener("click", coverClickHandler);
}

#32

Like this:
https://jsfiddle.net/hzyrfkwb/342/

function init(opts) {
        var playerVars = opts.playerVars || {};
        if (!window.YT) {
            load.js("https://www.youtube.com/player_api").then(function() {
                YT.ready(function() {
                    addVideo(opts.video, playerVars);
                });
            });
        } else {
            addVideo(opts.video, playerVars);
        }
    }
    return {
        init
    };
}());

function loadPlayer(containerSelector, playerVars) {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function initPlayer(wrapper) {
        videoPlayer.init({
            video: wrapper.querySelector(".video"),
            playerVars
        });
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        initPlayer(wrapper);
    }
          
    const cover = document.querySelector(containerSelector);
    cover.addEventListener("click", coverClickHandler);
}

#33

How would I do the top one?
https://jsfiddle.net/hzyrfkwb/343/

It’s different?

It’s only this:
addVideo(opts.video);


    function init(opts) {
        addVideo(opts.video);
    }
    return {
        init
    };
}());
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function initPlayer(wrapper) {
        videoPlayera.init({
            video: wrapper.querySelector(".video")
        });
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        if (!window.YT) {
            load.js("https://www.youtube.com/player_api").then(function() {
                YT.ready(function() {
                    initPlayer(wrapper);
                });
            });
        } else {
            initPlayer(wrapper);
        }
    }
    const cover = document.querySelector(".jacketc");
    cover.addEventListener("click", coverClickHandler);

#34

It’s not working for the top one:
https://jsfiddle.net/hzyrfkwb/345/

function init(opts) {
        if (!window.YT) {
            load.js("https://www.youtube.com/player_api").then(function() {
                YT.ready(function() {
                    addVideo(opts.video);
                });
            });
        } else {
            addVideo(opts.video);
        }
    }
    return {
        init
    };
}());

function loadPlayer(containerSelector) {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function initPlayer(wrapper) {
        videoPlayera.init({
            video: wrapper.querySelector(".video"),
        });
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        initPlayer(wrapper);
    }
          
    const cover = document.querySelector(containerSelector);
    cover.addEventListener("click", coverClickHandler);
}

#35

Please refer to post #12 for the details.


#36

Copying the bottom code to the top code doesn’t work either:
https://jsfiddle.net/hzyrfkwb/348/


#37

Why? What goes wrong with that code?


#38

The top piece disappears from the screen.


#39

All of the code so far has been to do with the multiple player section. If you made any changes to the single player code, you need to reverse those changes.


#40

Working code:
https://jsfiddle.net/hzyrfkwb/343/

What adjustments would I make to this similar to the bottom?


    function init(opts) {
        addVideo(opts.video);
    }
    return {
        init
    };
}());
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

    function initPlayer(wrapper) {
        videoPlayera.init({
            video: wrapper.querySelector(".video")
        });
    }

    function coverClickHandler(evt) {
        const wrapper = evt.currentTarget.nextElementSibling;
        show(wrapper);
        if (!window.YT) {
            load.js("https://www.youtube.com/player_api").then(function() {
                YT.ready(function() {
                    initPlayer(wrapper);
                });
            });
        } else {
            initPlayer(wrapper);
        }
    }
    const cover = document.querySelector(".jacketc");
    cover.addEventListener("click", coverClickHandler);
}());