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


#82

Then, how would I just connect:
https://jsfiddle.net/byw5szgt/29/

This:
<div class="video " data-id="M7lc1UVf-VE"></div>

To this:

(function iife() {
  "use strict";
  const iframe = document.querySelector(".video");

  function Iframe() {
    const iframe = document.createElement("iframe");
    const embed = "https://www.youtube.com/embed/ID?autoplay=1";
    iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("width", "606");
    iframe.setAttribute("height", "344");
    this.parentNode.replaceChild(iframe, this);
  }

}());

How would I do that?
I’ve been trying to figure that out and couldn’t.

Would I add a window to the function?

window.onYouTubePlayer = function()
 const iframe = document.createElement("iframe");
    const embed = "https://www.youtube.com/embed/ID?autoplay=1";
    iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("width", "606");
    iframe.setAttribute("height", "344");
    this.parentNode.replaceChild(iframe, this);
  }



#83

With the way you currently have the code, you can do it by binding the iframe to the function before you run it.

  loadIframe.bind(iframe)();

https://jsfiddle.net/pmw57/ps2bgoeL/

But that’s awful, and there are better ways available.

Instead, you can pass the iframe as an argument to the function, replacing those this keywords with that function parameter.

  // function loadIframe(container) {
  function loadIframe(container) {
    ...
    // frame.setAttribute("src", embed.replace("ID", this.dataset.id));
    iframe.setAttribute("src", embed.replace("ID", container.dataset.id));
    ...
    // this.parentNode.replaceChild(iframe, this);
    container.parentNode.replaceChild(iframe, container);
  }
  // loadIframe.bind(iframe)();
  loadIframe(iframe);

https://jsfiddle.net/pmw57/ps2bgoeL/1/

And that works well.


#84

How would I hook that up to the loadPlayer function?
https://jsfiddle.net/byw5szgt/86/

 function loadPlayer() {

  }

(function videoPlayer() {
  "use strict";

  let player;
  const load = document.querySelector(".jacketc");

  function loadPlayer() {

  }

  function loadClickHandler() {
    loadPlayer();
  }

  load.addEventListener("click", loadClickHandler);

  const iframe = document.querySelector(".video");

  function loadIframe(container) {
    const iframe = document.createElement("iframe");
    const embed = "https://www.youtube.com/embed/ID?autoplay=0";
    iframe.setAttribute("src", embed.replace("ID", container.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("width", "606");
    iframe.setAttribute("height", "344");
    container.parentNode.replaceChild(iframe, container);
  }
  loadIframe(iframe);
}());

#85

You could put the const iframe and loadIframe(iframe) lines in the loadPlayer function?


#86

Thank you.

I have more questions on this but those can wait for when you come back.

And thank you for all your help.


#87

You know how this piece:

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

Is separate from this:

 window.onYouTubePlayerAPIReady = function() {
    const video = document.querySelector(".video");
    const videoId = video.getAttribute("data-id");
    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: videoId,

I wanted to know how I could do that with this:
What I think I would be doing here is unbinding it.

How would that be done if it can be?
https://jsfiddle.net/byw5szgt/118/

  const iframe = document.querySelector(".video");

  function loadIframe(container) {
    const iframe = document.createElement("iframe");
    const embed = "https://www.youtube.com/embed/ID?autoplay=0";
    iframe.setAttribute("src", embed.replace("ID", container.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("width", "606");
    iframe.setAttribute("height", "344");
    container.parentNode.replaceChild(iframe, container);
  }
  loadIframe(iframe);
}());

I was thinking something like this:
Which is similar to how youtube does it, but it would be written differently than this:

  const iframe = document.createElement("iframe");
  const firstIframeTag = document.getElementsByTagName("Iframe")[0];
  firstIframTag.parentNode.insertBefore(tag, firstIframetTag);

  function loadIframe(container) {
    const iframe = document.querySelector(".video");
    const embed = "https://www.youtube.com/embed/ID?autoplay=0";
    iframe.setAttribute("src", embed.replace("ID", container.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("width", "606");
    iframe.setAttribute("height", "344");
    container.parentNode.replaceChild(iframe, container);
  }
  loadIframe(iframe);

#88

With the first example, one piece loads the YouTube library set of code, and the other piece creates the iframe youtube player.

The second example in the above code only creates the iframe youtube player, so there’s no need to separate the code at all.


#89

How would I fix this?
https://jsfiddle.net/byw5szgt/118/


(function iife() {
    "use strict";
    const iframe = document.querySelector(".video");

    function loadIframe(container) {
        const iframe = document.createElement("iframe");
        const embed = "https://www.youtube.com/embed/ID?autoplay=0";
        iframe.setAttribute("src", embed.replace("ID", container.dataset.id));
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("width", "606");
        iframe.setAttribute("height", "344");
        container.parentNode.replaceChild(iframe, container);
    }
    loadIframe(iframe);
}());

#90

As that iframe variable isn’t actually the iframe, but is the container that the iframe is contain in, I’d give it a more appropriate name of container instead.

    const container = document.querySelector(".video");
    ...
    loadIframe(container);

You could even give it a more expressive name, calling it iframeContainer.

    const iframeContainer = document.querySelector(".video");
    ...
    loadIframe(iframeContainer);

#91

It’s not working now, what did I do wrong?
https://jsfiddle.net/byw5szgt/184/


(function iife() {
  "use strict";

  const iframeContainer = document.querySelector(".video");

  function loadIframe(iframeContainer) {
    const iframe = document.createElement("iframe");
    const embed = "https://www.youtube.com/embed/ID?autoplay=0";
    iframe.setAttribute("src", embed.replace("ID", container.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("width", "606");
    iframe.setAttribute("height", "344");
    iframeContainer.parentNode.replaceChild(iframe, iframeContainer);
  }
  loadIframe(iframeContainer);
}());

#92

You shouldn’t change anything inside of the loadIframe function, but you did.


#93

I changed this:
https://jsfiddle.net/byw5szgt/118/

(function iife() {
  "use strict";

  const iframe = document.querySelector(".video");

  function loadIframe(container) {
    const iframe = document.createElement("iframe");
    const embed = "https://www.youtube.com/embed/ID?autoplay=0";
    iframe.setAttribute("src", embed.replace("ID", container.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("width", "606");
    iframe.setAttribute("height", "344");
    container.parentNode.replaceChild(iframe, container);
  }
  loadIframe(iframe);
}());

To This:
https://jsfiddle.net/byw5szgt/185/

(function iife() {
  "use strict";

  const iframeContainer = document.querySelector(".video");

  function loadIframe(iframeContainer) {
    const iframe = document.createElement("iframe");
    const embed = "https://www.youtube.com/embed/ID?autoplay=0";
    iframe.setAttribute("src", embed.replace("ID", container.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("width", "606");
    iframe.setAttribute("height", "344");
    iframeContainer.parentNode.replaceChild(iframe, iframeContainer);
  }
  loadIframe(iframeContainer);
}());

#94

Yes - you’ll see that there’s a difference inside of the loadIframe function. You should not have made things different there.


#95

It won’t work like this:
https://jsfiddle.net/byw5szgt/186/


    container.parentNode.replaceChild(iframe, container);
  }
  loadIframe(container);
}());

#96

Stop.

Go back to the working code in https://jsfiddle.net/byw5szgt/118/
Then make the simple change that I recommended about iframeContainer, in post #90

It’s just two lines that get updated. No more than that.


#97

This:

  const iframeContainer  = document.querySelector(".video");

  function loadIframe(container) {

Not this:


  const iframeContainer  = document.querySelector(".video");

  function loadIframe(iframeContainer) {

Update: Got it.

https://jsfiddle.net/byw5szgt/188/

(function iife() {
  "use strict";

  const iframeContainer = document.querySelector(".video");

  function loadIframe(iframeContainer) {
    const iframe = document.createElement("iframe");
    const embed = "https://www.youtube.com/embed/ID?autoplay=0";
    iframe.setAttribute("src", embed.replace("ID", iframeContainer.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("width", "606");
    iframe.setAttribute("height", "344");
    iframeContainer.parentNode.replaceChild(iframe, iframeContainer);
  }
  loadIframe(iframeContainer);
}());

#98

Yes, that’s right. There was more to my recommendation too.


#99

What else did you recommend?

Didn’t I do everything that you said to do?

What else would I change?

(function iife() {
  "use strict";

  const iframeContainer = document.querySelector(".video");

  function loadIframe(iframeContainer) {
    const iframe = document.createElement("iframe");
    const embed = "https://www.youtube.com/embed/ID?autoplay=0";
    iframe.setAttribute("src", embed.replace("ID", iframeContainer.dataset.id));
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("width", "606");
    iframe.setAttribute("height", "344");
    iframeContainer.parentNode.replaceChild(iframe, iframeContainer);
  }
  loadIframe(iframeContainer);
}());

#100

Placeholder

<iframe width="450" height="283" src="https://www.youtube.com/embed/VIDEO_ID_HERE?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>

Autoplay link:

<a class="introVid" href="#video">Watch the video</a></p>

THE JQUERY

The onClick catcher that calls the function

jQuery('a.introVid').click(function(){
  autoPlayVideo('VIDEO_ID_HERE','450','283');
});

The function

function autoPlayVideo(vcode, width, height){
  "use strict";
  $("#videoContainer").html('<iframe width="'+width+'" height="'+height+'" src="https://www.youtube.com/embed/'+vcode+'?autoplay=1&loop=1&rel=0&wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>');
} 

#101

Nothing else.