Showing the video without a cover

asasass · December 9, 2018, 4:22pm

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

Working Code:

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

Paul_Wilkins · December 9, 2018, 9:35pm

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.

Paul_Wilkins · December 9, 2018, 9:37pm

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

asasass · December 9, 2018, 9:40pm

Here:

Paul_Wilkins · December 9, 2018, 9:59pm

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

asasass · December 9, 2018, 10:01pm

Deleted the iife function:

asasass · December 9, 2018, 10:44pm

Like this?

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

asasass · December 9, 2018, 10:54pm

Like this?

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

Paul_Wilkins · December 10, 2018, 12:40pm

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.

asasass · December 10, 2018, 2:03pm

Step One: Done

Move the videoPlayer.init out of the iife

Step Two

    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/

Paul_Wilkins · December 10, 2018, 8:29pm

asasass:

Move the videoPlayer.init out of the iife

Step Two
https://jsfiddle.net/sx87fa65/32/
    function initPlayer(wrapper) {
        videoPlayer.init({
            video: wrapper.querySelector(".video")
        });
    }

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.

asasass · December 10, 2018, 8:34pm

Like this?

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


videoPlayer.init

Paul_Wilkins · December 10, 2018, 8:39pm

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

asasass · December 10, 2018, 8:44pm

Like this?


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

asasass · December 11, 2018, 12:44am

What would I do next?

Paul_Wilkins · December 11, 2018, 1:06am

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?

asasass · December 11, 2018, 1:08am

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:

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

Paul_Wilkins · December 11, 2018, 1:11am

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

asasass · December 11, 2018, 1:12am

oh, ok. thanks.

asasass · December 11, 2018, 4:56am

How would I get this to work using images?

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