Trying to add loadPlayer()

asasass · September 7, 2021, 7:04pm

I was trying to figure out how to do this but I’m stuck.

The video stopped appearing after I added function loadPlayer() to the code.

const videoPlayer = (function makeVideoPlayer() {

  let player = null;

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

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);
  }

  function addPlayer(video) {
    new YT.Player(video, {
      events: {
        "onReady": onPlayerReady
      },
      height: 360,
      host: "https://www.youtube-nocookie.com",
      playerVars: {
        autoplay: 1,
        cc_load_policy: 0,
        controls: 1,
        disablekb: 1,
        fs: 0,
        iv_load_policy: 3,
        rel: 0,
      },
      videoId: video.dataset.id,
      width: 640
    });
  }

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

}());

function onYouTubeIframeAPIReady() {
  const frameContainer = document.querySelector(".video");
  videoPlayer.addPlayer(frameContainer);
}


/*
function onYouTubeIframeAPIReady() {
  const cover = document.querySelector(".playa");
  const wrapper = cover.parentElement;
  const frameContainer = wrapper.querySelector(".video");
  videoPlayer.addPlayer(frameContainer);
}*/

asasass · September 14, 2021, 5:09am

Which of these?

or would it be written a different way?

Code 1
https://jsfiddle.net/51aeuy9x/

const videoPlayer = (function makeVideoPlayer() {

  let player = null;

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

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);

  }

  function addPlayer(video) {

    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: video.dataset.id,
      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 {
    addPlayer,
    init
  };

}());

function onYouTubeIframeAPIReady() {
  const frameContainer = document.querySelector(".video");
  videoPlayer.addPlayer(frameContainer);
}

(function iife() {

  function coverClickHandler() {
    videoPlayer.init();
  }

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

Code 2
https://jsfiddle.net/qzynsw4j/

const videoPlayer = (function makeVideoPlayer() {

  let player = null;

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

  window.onYouTubeIframeAPIReady = function() {
    const frameContainer = document.querySelector(".video");
    addPlayer(frameContainer);
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);

  }

  function addPlayer(video) {

    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: video.dataset.id,
      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 {
    addPlayer,
    init
  };

}());

(function iife() {

  function coverClickHandler() {
    videoPlayer.init();
  }

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

Code 3
https://jsfiddle.net/wpf3bgha/

const videoPlayer = (function makeVideoPlayer() {

  let player = null;

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

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);
  }

  window.onYouTubePlayerAPIReady = function() {

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

    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: video.dataset.id,
      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() {

  function coverClickHandler(evt) {
    videoPlayer.init();
  }

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

Paul_Wilkins · September 14, 2021, 8:41am

I am not scraping through all of that code examining them for differences between them.

You must simplify what you ask.

asasass · September 14, 2021, 1:23pm

Is one written more properly than the other, meaning, is one the right and proper way to write the code?

Looking at older code, I was trying to put one together that uses loadPlayer()

These were the ways I was able to put together the code.

Is one of these the correct way to do it?

These are the differences between the codes.

Code 1 uses loadPlayer() and addPlayer
https://jsfiddle.net/51aeuy9x/

function loadPlayer() {
  }

 function addPlayer(video) {

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

}());

function onYouTubeIframeAPIReady() {
  const frameContainer = document.querySelector(".video");
  videoPlayer.addPlayer(frameContainer);
}

  function coverClickHandler() {
    videoPlayer.init();
  }

Code 2 uses loadPlayer() window() and addPlayer
https://jsfiddle.net/qzynsw4j/

function loadPlayer() {
  }

 window.onYouTubeIframeAPIReady = function() {
    const frameContainer = document.querySelector(".video");
    addPlayer(frameContainer);
  }

  function addPlayer(video) {

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

}());

  function coverClickHandler() {
    videoPlayer.init();
  }

Code 3 uses loadPlayer() and window()
https://jsfiddle.net/wpf3bgha/

function loadPlayer() {
  }

window.onYouTubePlayerAPIReady = function() {

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

}());

  function coverClickHandler(evt) {
    videoPlayer.init();
  }

asasass · September 14, 2021, 10:33pm

I think this code seems to be written the best out of the 3.

Meaning, I think it’s written the most proper way.

Do you agree?
https://jsfiddle.net/7o9v4asL/

I was looking at older code I had, trying to update it.

I think this is the best it will get.

const videoPlayer = (function makeVideoPlayer() {

  let player = null;

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

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);
  }

  window.onYouTubePlayerAPIReady = function() {

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

    new YT.Player(video, {
      width: 606,
      height: 344,
      videoId: video.dataset.id,
      playerVars: {
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  };

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

}());

(function iife() {

  function coverClickHandler() {
    videoPlayer.init();
  }

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

Paul_Wilkins · September 14, 2021, 10:35pm

In terms of loadPlayer that’s good, but the onYouTubePlayerAPIReady part should just be a separate function of that name.

Then in the init function before loadPlayer is where you should add it to the window:

window.onYouTubePlayerAPIReady = onYouTubePlayerAPIReady;

asasass · September 15, 2021, 4:23am

Did I do this right?
https://jsfiddle.net/xz8vp2cq/

const videoPlayer = (function makeVideoPlayer() {

    let player = null;

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

    function onPlayerReady(event) {
        player = event.target;
        player.setVolume(100);
    }

    function onYouTubePlayerAPIReady() {
        const video = document.querySelector(".video");
        new YT.Player(video, {
            events: {
                "onReady": onPlayerReady
            },
            height: 360,
            host: "https://www.youtube-nocookie.com",
            playerVars: {
                autoplay: 0,
                controls: 0,
                disablekb: 1,
                enablejsapi: 1,
                fs: 0,
                iv_load_policy: 3,
                rel: 0
            },
            videoId: video.dataset.id,
            width: 640
        });
    }

    function init() {
        window.onYouTubePlayerAPIReady = onYouTubePlayerAPIReady;
        loadPlayer();
    }
    return {
        init
    };

}());

(function iife() {

    function coverClickHandler() {
        videoPlayer.init();
    }

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

Paul_Wilkins · September 15, 2021, 5:16am

Yes that’s right, but it’s really slow after clicking the play button.

You can remove that slowness by doing the videoPlayer stuff before anyone clicks the button, by having videoPlayer.init() not inside of the coverClickHandler, but at the end of the code instead.

asasass · September 15, 2021, 4:28pm

I have a question.

Is window supposed to be inside the init function, because it works with it outside of it?

Should it still stay inside the init function, or it can stay outside of it?

https://jsfiddle.net/yun3xh0q/

Paul_Wilkins · September 15, 2021, 11:23pm

Window is is supposed to be inside of the init function. That way nothing deliberately happens until the init is executed.

system · December 16, 2021, 6:24am

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