What is the purpose of the load function?

This serves a purpose though.

It prevents the browser from picking up the javascript from the youtube until it is clicked. It does a good job at that.

Can it be added back it?

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

Is there a way to demonstrate the problem when the load code isn’t being used?

Maybe it doesn’t serve a purpose anymore and perhaps its run its course.

1 Like

Using this as an example, how does js.load get removed from the code?

https://jsfiddle.net/oL2uqcdf/3/

I know the top piece gets removed, but what would this get changed to?

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

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

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

Well the code that uses it is here:

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

Copy the https://www.youtube.com/player_api and open up the Resources section on the left of jsFiddle. Paste the https://www.youtube.com/player_api in there and press the blue plus button to its right. That adds the player_api script as a resource.

We can move the addVideo part up above the load code

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

Now that the load part isn’t being used, it can be safely removed.

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

And the load module at the top of the code can also be removed.

// const load = (function() {
//   "use strict";
...
// }());

That’s how it’s done. Here is where you can see how the code has been updated: https://jsfiddle.net/gcu08oe6/

1 Like

Very simple and not complex.

I did that with this code and it did not work.
https://jsfiddle.net/L45hzn2k/2/

Would this one be changed to something different?

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

You didn’t do the Resources thing.

I tried this:


  function init(video, settings) {
    addVideo(video, settings);
  }
  return {
    init
  };
}());

It seems that you’ve just paid attention to the code samples, and haven’t read what I wrote around them.

Here - let me copy what I wrote about the Resources section.

1 Like

https://jsfiddle.net/jzsu5gyb/1/

  function addVideo(video, settings) {
    playerVars = Object.assign({
      videoId: video.dataset.id,
      host: "https://www.youtube-nocookie.com",
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange
      }
    }, settings);
    players.push(new YT.Player(video, playerVars));
  }

  function init(video, settings) {
    addVideo(video, settings);
  }
  return {
    init
  };
}());

You have still failed to do anything about the Resources section. That needs to be done.

1 Like

I got it to work after doing that.

How do I add
https://www.youtube.com/player_api

To the javascript itself?

Here, let me quote what I said again.

Please let me know if there’s anything you don’t understand about that.

If I want to take the code and put it on github or some other site to test different things outside of jsfiddle. or, making a standalone page.

I got it working that way.

With codePen they have a settings place where the link to player_api is placed.

Otherwise, when a <script> tag is used in the HTML for your code, a similar <script> tag is used just before it for the player_api.

That’s the normal and simple way that things typically work, and they work well.

Would I be able to attach this to it?

or, some form of that?


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

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



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

}());

Yes, that’s a better way too than using the load code. I must go for the day though, so good luck.

1 Like

Thank you, I’ll try and see what I can figure out.