Showing the video without a cover


#1

What’s being done here is removing the cover and for the video to show instead.

Working Code:
https://jsfiddle.net/sx87fa65/23/

Also:
I don’t believe a ClickHandler belongs on the code if we just want the video to show without any click. So, that whole function should be removed.

const load = (function() {
    "use strict";

    function _load(tag) {
        return function(url) {
            return new Promise(function(resolve) {
                const element = document.createElement(tag);
                const parent = "body";
                const attr = "src";
                element.onload = function() {
                    resolve(url);
                };
                element[attr] = url;
                document[parent].appendChild(element);
            });
        };
    }
    return {
        js: _load("script")
    };
}());
(function manageCover() {
    "use strict";
    const hide = (el) => el.classList.add("hide");

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
    }
    const cover = document.querySelector(".jacketc");
    cover.addEventListener("click", coverClickHandler);
}());
const videoPlayer = (function makeVideoPlayer() {
    "use strict";

    function onPlayerReady(event) {
        const player = event.target;
        player.setVolume(0); // percent
    }

    function onPlayerStateChange(event) {
        const player = event.target;
        const playerVars = player.b.b.playerVars;
        if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
            player.seekTo(playerVars.start);
        }
    }

    function addVideo(video) {
        new YT.Player(video, {
            videoId: video.dataset.id,
            width: 606,
            height: 344,
            playerVars: {
                autoplay: 1,
                controls: 1,
                rel: 0,
                iv_load_policy: 3,
                cc_load_policy: 0,
                fs: 0,
                disablekb: 1,
                loop: true,
                start: 200,
                end: 204
            },
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        });
    }

    function init(opts) {
        load.js("https://www.youtube.com/player_api").then(function() {
            YT.ready(function() {
                addVideo(opts.video);
            });
        });
    }
    return {
        init
    };
}());
(function iife() {
    "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);
}());

#2

Well let’s see.

Set autoplay to 0, to protect you from the ire of the masses.
Move the videoPlayer.init out of the iife and replace wrapper with document
Delete the iife.
Delete jacketc div from the HTML, and delete the hide class from the HTML too.
Delete the manageCover function.


#3

Autoplay should always be zero as the default setting, with changes to that occurring via configuration of the init settings instead.


#4

Here:
https://jsfiddle.net/sx87fa65/25/


#5

/me looks at the code, and throws it away in disgust as some of the instructions have not been followed. :wink:


#6

Deleted the iife function:
https://jsfiddle.net/sx87fa65/26/


#7

Like this?
https://jsfiddle.net/sx87fa65/28/

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


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

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

#8

Like this?
https://jsfiddle.net/sx87fa65/30/

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

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

#10

No. It looks like the code has become so damaged from what you’ve done, that the only reasonable solution is to go back to working code, and follow through with the instructions in a more careful manner.


#11

Step One: Done
https://jsfiddle.net/sx87fa65/31/

Move the videoPlayer.init out of the iife

Step Two
https://jsfiddle.net/sx87fa65/32/

    function initPlayer(wrapper) {
        videoPlayer.init({
            video: wrapper.querySelector(".video")
        });
    }
(function iife() {
    "use strict";
    const show = (el) => el.classList.remove("hide");

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

Then wrapper becomes document:
https://jsfiddle.net/sx87fa65/33/

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

Delete the word iife:
https://jsfiddle.net/sx87fa65/34/

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

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

Delete jacketc div from the HTML, and delete the hide class from the HTML too.

https://jsfiddle.net/sx87fa65/35/

Delete the manageCover function.

https://jsfiddle.net/sx87fa65/36/


#12

Here’s one place where you’re going wrong. You are also moving out the initPlayer function which isn’t going to work for you.

No, not the word. The whole function.


#13

Like this?
https://jsfiddle.net/sx87fa65/37/

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


videoPlayer.init

#14

No, not like that. You need the rest of the videoPlayer.init code.


#15

Like this?

https://jsfiddle.net/sx87fa65/39/


        videoPlayer.init({
            video: document.querySelector(".video")
        });

#16

What would I do next?
https://jsfiddle.net/sx87fa65/39/


#17

Well, the only reason why it’s not working is because you haven’t followed the instructions to get it working.

My browser console shows an error about an addEventListener statement that’s in the manageCover section of code.

Let’s look back at the instructions that I gave you.

Do you see an instruction there that’s directly connected to the problem?


#18

Why would this hang outside by itself?

It doesn’t belong inside a function or anything?

        videoPlayer.init({
            video: document.querySelector(".video")
        });

It’s working now:
https://jsfiddle.net/sx87fa65/41/

  function addVideo(video) {
    new YT.Player(video, {
      videoId: video.dataset.id,
      width: 606,
      height: 344,
      playerVars: {
        autoplay: 0,
        controls: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        loop: true,
        start: 200,
        end: 204
      },
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    });
  }

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

        videoPlayer.init({
            video: document.querySelector(".video")
        });

#19

Nope, it runs immediately instead, which causes the iframe to be created on page load.


#20

oh, ok. thanks.


#21

How would I get this to work using images?
https://jsfiddle.net/g6oaht8f/172/

load.img1("images/logo.png")
load.img2("images/logo.png")
load.img3("images/logo.png")
load.img4("images/logo.png")
load.img5("images/logo.png")

They wouldn’t be loading onclick.

They would load right away in the background.

        imageLoad.init({
            image: document.querySelector(".image")
        });
const load = (function makeLoad() {
    "use strict";

    function _load(tag) {
        return function(url) {
            return new Promise(function(resolve) {
                const element = document.createElement(tag);
                const parent = "body";
                const attr = "src";
                element.onload = function() {
                    resolve(url);
                };
                element[attr] = url;
                document[parent].appendChild(element);
            });
        };
    }
 return {
    
    js: _load("script"),
    img: _load("img")
  }
})();
const imageLoad = (function makeImageLoad() {
    "use strict";
    

    function init(video, settings) {
        load.img("https://www.youtube.com/player_api").then(function() {
            YT.ready(function() {
                addVideo(video, settings);
            });
        });
    }
    return {
        init
    };
}());

        imageLoad.init({
            image: document.querySelector(".image")
        });