Questions about the YouTube player_api code


#41

Do it in such a way that it’s less likely to break working code.

Start by copying the clickhandler if/else code into the videoPlayer init function.
When copied, replace initPlayer statements with the addVideo one instead, and things should still work.

When confirmed as working, you can remove the clickhandler if/else code and replace it with just the initPlayer line instead.


#42

I got this far, would I make any other changes?
https://jsfiddle.net/hzyrfkwb/352/

 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 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);
        initPlayer(wrapper);
    }
    
    const cover = document.querySelector(".jacketc");
    cover.addEventListener("click", coverClickHandler);
}());

#43

It seems good so far.


#44

These lines aren’t being used in it:


function loadPlayer(containerSelector) {
    "use strict";

const cover = document.querySelector(containerSelector);

It disappears if I add them in:

See:
https://jsfiddle.net/hzyrfkwb/355/


#45

The videoPlayera and videoPlayer functions look to be very similar. It should be possible for us to improve things by using only the one videoPlayer function.

A good way to achieve that is to move both of the videoPlayer functions together, which is best achieved by moving the videoPlayer function up until it’s above the iife function.

We can then tell the iife initPlayer function to use videoPlayer instead of videoPlayera, and nothing is left using the videoPlayera code. That videoPlayera code can now be deleted.


#46

One uses PlayerVars, the other doesn’t:

Does that matter?


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


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

#47

Not a problem - the init function is well setup to work properly with no playerVars at all.

That’s what the || {} is designed to help with.


#48

Now both say videoPlayer

How do we combine them then?
https://jsfiddle.net/hzyrfkwb/358/

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


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

#49

Do the players still work?


#50

Yes:
https://jsfiddle.net/hzyrfkwb/359/

Should they?


#51

Yes they should. We can now see that the iife function is doing the same type of work that the loadPlayer function is doing.

We can remove that iife function completely, and add another loadPlayer command above that list of other loadPlayer commands at near the bottom of the code.

loadPlayer(".jacketc");

#52

Which iife function?


#53

Line 92. https://jsfiddle.net/hzyrfkwb/359/


#54
    "use strict";
    const show = (el) => el.classList.remove("hide");

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

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

#55

No. That loadPlayer command doesn’t go in the iife function.

Look further down below the loadPlayer function where loadPlayer is used to load up all of those other videos. That’s where it goes instead.


#56

The 1st or last one?

It does come first on the page:



 loadPlayer(".jacketc");
loadPlayer(".playa", {
    start: 900,
    end: 1200
});
loadPlayer(".playb", {
    start: 30,
    end: 50
});
loadPlayer(".playc", {
    start: 30,
    end: 50
});
loadPlayer(".playd", {
    start: 30,
    end: 50
});
loadPlayer(".playe", {
    start: 30,
    end: 50
});
loadPlayer(".playf", {
    start: 30,
    end: 50
});
loadPlayer(".playg", {
    start: 30,
    end: 50
});
loadPlayer(".playh", {
    start: 30,
    end: 50
});
loadPlayer(".playi", {
    start: 30,
    end: 50
});

#57

Above the first one, as that closely approximates how they are ordered on the page too.


#58

Then this:

Anything else?
https://jsfiddle.net/hzyrfkwb/363/

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

    function initPlayer(wrapper) {
        videoPlayer.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);  
}

#59

That stays unchanged. It’s the other function above it called iife, that’s gets removed.


#60

This gets deleted?
https://jsfiddle.net/hzyrfkwb/365/

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

    function initPlayer(wrapper) {
        videoPlayer.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);  
}