Preventing the browser from reading the YouTube code until the image was clicked


#102

You had said this: There was more to my recommendation too.

So I thought there was more I had to do.


#103

I see how they both don’t work together:

The api wins.
https://jsfiddle.net/byw5szgt/193/


#104

You only showed the first line of my recommendation in your code listing.
It was the rest of my recommendation (the last of two lines) that I was referring to.


#105

You were referring to a different post of mine, not the I got it one.

I got it.


#106

I’m stuck trying to figure out how I would get these to open.
This one is set up differently, but I don’t understand why none of the boxes are opening.

How would I have gotten it to work?
Everything I’m trying is not working.
https://jsfiddle.net/d72Lp43v/37/

I left the first 2 open, and the rest blacked out so once those are working, I can then transfer that to the others too.

I don’t understand why when I click on the 2nd box it’s not opening.
It stays hidden behind the image.


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

  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onPlayerReady(event) {
    const youtubePlayer = event.target;
    youtubePlayer.setVolume(50); // percent
  }
  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  };

  function init() {
    loadPlayer();
  }
  return {
    init
  };

}());


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

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init();
  }

  const cover = document.querySelector(".playa");
  cover.addEventListener("click", coverClickHandler);
}());

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

  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onPlayerReady(event) {
    const youtubePlayer = event.target;
    youtubePlayer.setVolume(50); // percent
  }
  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  };

  function init() {
    loadPlayer();
  }
  return {
    init
  };

}());


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

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayerb.init();
  }

  const cover = document.querySelector(".playb");
  cover.addEventListener("click", coverClickHandler);
}());

#107

When it’s set up like this, how come the 2nd box won’t open?
And how would I be able to get it to open?
https://jsfiddle.net/d72Lp43v/41/


<div class="wrap">
  <svg class="playa" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">

    <div class="video playinga" data-id="M7lc1UVf-VE"></div>
  </div>
  <svg class="playb" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
  </svg>
  <div class="hide">
    <div class="video playingb" data-id="M7lc1UVf-VE"></div>
  </div>

  <div class="linesa"></div>
  <div class="linesb"></div>

</div>

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

  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onPlayerReady(event) {
    const youtubePlayer = event.target;
    youtubePlayer.setVolume(50); // percent
  }
  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  };

  function init() {
    loadPlayer();
  }
  return {
    init
  };

}());


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

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init();
  }

  const cover = document.querySelector(".playa");
  cover.addEventListener("click", coverClickHandler);
}());

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

  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onPlayerReady(event) {
    const youtubePlayer = event.target;
    youtubePlayer.setVolume(50); // percent
  }
  window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  };

  function init() {
    loadPlayer();
  }
  return {
    init
  };

}());


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

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayerb.init();
  }

  const cover = document.querySelector(".playb");
  cover.addEventListener("click", coverClickHandler);
}());

#108

If I wanted to set different PlayVars for each video
How would this be done?

Working version: Only 1 PlayVars.
How would I add 8 of those to that?
https://jsfiddle.net/d72Lp43v/32/


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

  function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

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

  function addVideoa(video) {
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  }

  function addVideob(video) {
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  }

  function addVideoc(video) {
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  }

  function addVideod(video) {
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  }

  function addVideoe(video) {
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  }

  function addVideof(video) {
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  }

  function addVideog(video) {
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  }

  function addVideoh(video) {
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  }

  function addVideoi(video) {
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 200,
      height: 200,
      videoId: videoId,
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  }
  let apiIsReady = false;
  let timer;
  window.onYouTubePlayerAPIReady = function() {
    apiIsReady = true;
  }

  function init(video) {
    loadPlayer();
    timer = setInterval(function checkAPIReady() {
      if (apiIsReady) {
        timer = clearInterval(timer);
        addVideo(video);
      }
    }, 1);
  }
  return {
    init
  };
}());
(function iife() {
  "use strict";
  const show = (el) => el.classList.remove("hide");

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }

  const cover = document.querySelector(".playa");
  cover.addEventListener("click", coverClickHandler);
}());

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


  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playb");
  cover.addEventListener("click", coverClickHandler);
}());

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


  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playc");
  cover.addEventListener("click", coverClickHandler);
}());

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


  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playd");
  cover.addEventListener("click", coverClickHandler);
}());

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

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playe");
  cover.addEventListener("click", coverClickHandler);
}());

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

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }

  const cover = document.querySelector(".playf");
  cover.addEventListener("click", coverClickHandler);
}());

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


  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playg");
  cover.addEventListener("click", coverClickHandler);
}());

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

  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playh");
  cover.addEventListener("click", coverClickHandler);
}());

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


  function coverClickHandler(evt) {
    const wrapper = evt.currentTarget.nextElementSibling;
    show(wrapper);
    videoPlayer.init(wrapper.querySelector(".video"));
  }
  const cover = document.querySelector(".playi");
  cover.addEventListener("click", coverClickHandler);
}());

#109

There is a load of duplication there. Removing that duplication is the key to success.

I’ll take a look at supplying an example of that soon.


#110

If I want to set, different PlayVars for each video.

There would be 9 of these altogether:
playerVars: {

If I wanted one video to have a different end and start time.

start: 36,
end: 45,

or, if I wanted a different video to use loop.

These are the only things where only 1 is needed of it.

function loadPlayer() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

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

#111

After that is figured out, what I would want to do next is, after one is clicked, if I click on another video, I would want the other one before it to stop.


#112

That part is easy. You just loop through all of the players stopping them all, before starting the one that was chosen.


#113

From this:
https://jsfiddle.net/rxfs1etb/14/

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

To this:
https://jsfiddle.net/rxfs1etb/13/

Var’ becomes ‘Const,’ what would ‘for’ become?

Changing it to ‘let’ doesn’t work.

Does it stay as ‘for’, or would I change it to something else?

<script>
function init() {
const vidDefer = document.getElementsByTagName('iframe');
for (const i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

But then I saw how this:
for (n = 0; n < v.length; n++) {


      for (n = 0; n < v.length; n++) {
        div = document.createElement("div");
        div.setAttribute("data-id", v[n].dataset.id);
        div.innerHTML = thumb(v[n].dataset.id);
        div.onclick = iframe;
        v[n].appendChild(div);
      }
    });

Became this:
v.forEach(function (video) {


    function init() {
        v.forEach(function (video) {
            const div = document.createElement("div");
            div.setAttribute("data-id", video.dataset.id);
            div.innerHTML = createThumbnail("AJDZEOX");
            div.onclick = replaceThumbWithIframe;
            video.appendChild(div);
        });
    }
    init();
}());

#114

That all depends on what the for statement is doing.

for (var i=0; i<vidDefer.length; i++) {

It’s looping over each item in the vidDefer function, so you can use the forEach method instead.

// for (var i=0; i<vidDefer.length; i++) {
vidDefer.forEach(function (vid) {
    // if(vidDefer[i].getAttribute('data-src')) {
    if(vid.getAttribute('data-src')) {
        // vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
        vid.setAttribute('src', vid.getAttribute('data-src'));
    }
// }
});

#115

Now the video isn’t showing:
https://jsfiddle.net/rxfs1etb/15/

Working version:
https://jsfiddle.net/rxfs1etb/14/


#117

That’s because you’ve messed up some of the closing braces.


#118

Additionally, instead of using data-src it’s preferred to use the dataset property instead.

vidDefer.forEach(function (vid) {
    // if(vid.getAttribute('data-src')) {
    if(vid.dataset.src) {
        // vid.setAttribute("src", vid.getAttribute("data-src"));
        vid.setAttribute("src", vid.dataset.src);
    }
});

#119

Still not showing:
https://jsfiddle.net/rxfs1etb/18/


<script>
  function init() {
    const vidDefer = document.getElementsByTagName('iframe');
    vidDefer.forEach(function(vid) {
      if (vid.dataset("src")) {
        vid.setAttribute("src", vid.dataset("src"));
      }
    });
    window.onload = init;

</script>

#120

That’s because you still haven’t fixed the closing braces properly. Every opening brace must be paired with a matching closing brace.


#121

Like this?


<script>
  function init() {
    const vidDefer = document.getElementsByTagName('iframe');
    vidDefer.forEach(function(vid) {
        if (vid.dataset("src")) {
          vid.setAttribute("src", vid.dataset("src"));
        }
      }
    });
  window.onload = init;

</script>

That’s not it either.


#122

No not like that. Here’s why.

  function init() {
    ...
    vidDefer.forEach(function(vid) {
        ...
      }
    });

Do you see the trouble yet?

How about now when more is removed?

  function init() {
    ...
    vidDefer.forEach(
        ...
    });

Can you see where the trouble is now?