Preventing YouTube from being launched until one of the class names is clicked

On Code 1 that uses 1 ClickHandler, YouTube starts playing right away before it is clicked.

On Code 2 that uses 2 ClickHandlers, YouTube doesn’t start playing before it is clicked.

How do I fix the code where YouTube starts playing right away, before it is clicked?

Should Code 1 that uses only 1 ClickHandler, should it be using 2 instead?

Would that fix the issue here?

(Code 1) uses 1 ClickHandler

YouTube Autoplays before it is clicked

Click “Run
or, YouTube starts after opening the link.
code: Untitled - JSitor

(function iife() {
  "use strict";

  function show(el) {
    el.classList.remove("hide");
    document.querySelector(".container1").classList.add('slide');
  }

  function hide(el) {
    el.classList.add("hide");
   
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const thewrap = cover.parentNode.querySelector(".container");
    hide(cover);
    show(thewrap);
  }
  const cover = document.querySelector(".jacket");
  cover.addEventListener("click", coverClickHandler);
}());

const videoPlayer = (function makeVideoPlayer() {
  "use strict";

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100); // percent
  }
  let hasShuffled = false;

  function onPlayerStateChange(event) {
    const player = event.target;
    const shufflePlaylist = true;

    if (!hasShuffled) {
      player.setShuffle(shufflePlaylist);
      player.playVideoAt(0);
      hasShuffled = true;
    }
  }

  function addVideo(video) {

    const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";

    new YT.Player(video, {
      
      width: 640,
      height: 360,
      host: "https://www.youtube-nocookie.com",
      playerVars: {
        autoplay: 1,
        controls: 1,
        loop:1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        playlist
      },
      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")
});

(Code 2) uses 2 ClickHandlers.

YouTube Does Not Autoplay before it is clicked

Which is how it should work.
code: Untitled - JSitor

(function manageCover() {
  "use strict";

  function hide(el) {
    el.classList.add("hide");
  }

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

  function onPlayerReady(event) {
    const player = event.target;
    player.setVolume(100); // percent
  }
  let hasShuffled = false;

  function onPlayerStateChange(event) {
    const player = event.target;
    const shufflePlaylist = true;

    if (!hasShuffled) {
      player.setShuffle(shufflePlaylist);
      player.playVideoAt(0);
      hasShuffled = true;
    }
  }

  function addVideo(video) {

    const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";

    new YT.Player(video, {

      width: 640,
      height: 360,
      host: "https://www.youtube-nocookie.com",
      playerVars: {
        autoplay: 1,
        controls: 1,
        loop: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
        playlist
      },
      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";

  function 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(".jacket");
  cover.addEventListener("click", coverClickHandler);
}());

Code 1 uses 1 ClickHandler

YouTube Autoplays before it is clicked: (Click Run)
code: Untitled - JSitor

Code 1 should work the same as Code 2, where YouTube doesn’t start until it is clicked.

Code 2 uses 2 ClickHandlers

YouTube Does Not Autoplay before it is clicked (Click Run)
code: Untitled - JSitor

This should be able to help better test it.

Code 1
code: Untitled - JSitor

YouTube starts before anything is clicked.

Behind that there should be a black screen I believe, showing that it has not loaded.
In this state, YouTube should not be appearing on the screen at all.
It should only appear on the screen after it is clicked.

Code 2
code: Untitled - JSitor

Uses This, which causes the YouTube to never show/appear on the screen until it is clicked.

It also uses 2 ClinkHandlers which probably better separates everything out.

<div class="wrap hide">
<div class="video video-frame"></div>
</div>

I updated the class names here so it is easier to make out what each is.

Code 1

code Untitled - JSitor

curtain
container
panel
jacket

To reproduce issue, either Run buttons to run the code would need to be pressed.

I think it’s more like, “Preventing YouTube from being launched until one of the class names is clicked.”

That’s how Code 2 works I believe.
code: Untitled - JSitor

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.