Questions about the YouTube player_api code

asasass · December 3, 2018, 10:40pm

Like 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);
        }
    }

    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);
        }
    }

Paul_Wilkins · December 3, 2018, 10:41pm

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

asasass · December 3, 2018, 10:42pm

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);
        }
    }

Paul_Wilkins · December 3, 2018, 10:42pm

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

asasass · December 3, 2018, 10:45pm

I’m replacing this:

function coverClickHandler(evt) {

asasass · December 3, 2018, 10:45pm

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);
        }
    }

Paul_Wilkins · December 3, 2018, 10:47pm

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

asasass · December 3, 2018, 10:47pm

You told me this though:

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

asasass · December 3, 2018, 10:48pm

What gets replaced then?

Paul_Wilkins · December 3, 2018, 10:49pm

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

asasass · December 3, 2018, 10:52pm

What happens with the.

coverClickHandler


 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);
}

asasass · December 3, 2018, 10:55pm

Like 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);
        }
    }
    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);
}

asasass · December 3, 2018, 10:58pm

How would I do the top one?

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);

asasass · December 3, 2018, 11:03pm

It’s not working for the top one:

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);
}

Paul_Wilkins · December 3, 2018, 11:11pm

Please refer to post #12 for the details.

asasass · December 3, 2018, 11:13pm

Copying the bottom code to the top code doesn’t work either:

Paul_Wilkins · December 3, 2018, 11:16pm

Why? What goes wrong with that code?

asasass · December 3, 2018, 11:17pm

The top piece disappears from the screen.

Paul_Wilkins · December 3, 2018, 11:19pm

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.

asasass · December 3, 2018, 11:21pm

Working code:

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);
}());