Video Player Clone Project

Here is the code with the array at the bottom:

https://jsfiddle.net/bwadtsg4/

Here is the array:

videoPlayer.init([
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
]);

In the code here, you can see the array is placed at the bottom.

Looking at how this code works, how would I do that to the below code?

That is all I am doing in the code, in the bellow code, adding an array to the bottom.

const videoPlayer = (function makeVideoPlayer() {
  const config = {};
  let player = null;

  function loadIframeScript() {
    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 onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".play");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer, config.playlist);
  }

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    player.stopVideo();
  }

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

  function addPlayer(video, playlist) {

    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    config.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady
    };
    player = new YT.Player(video, config);

  }

  function play() {
    player.playVideo();
  }

  function init(videos) {
    config.playlist = videos.join();
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
  }

  return {
    addPlayer,
    init,
    play
  };
}());

(function initCover() {
  function coverClickHandler() {
    videoPlayer.play();
  }

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

videoPlayer.init([
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
]);

How am I able to do that with this code?

I want to place the array at the bottom.

Like how it was done in the above code.

https://jsfiddle.net/89Leo0dq/

I have been trying to figure this out.

This code is set up a little differently, but I should still be able to do it.

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

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    player.stopVideo();
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);
    shufflePlaylist(player);
    const iframe = player.h;
    iframe.dispatchEvent(events.afterPlayerReady);
  }

  function addPlayer(video) {

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

    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    config.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady
    };

    player = new YT.Player(video, config);

    const iframe = player.h;
    const eventHandler = eventHandlers.afterPlayerReady;
    iframe.addEventListener("afterPlayerReady", eventHandler);
  }

  function play() {
    player.playVideo();
  }

  function addEvents(handlers) {
    eventHandlers.afterPlayerReady = handlers.afterPlayerReady;
    events.afterPlayerReady = new Event("afterPlayerReady");
  }

  function init(initEventHandlers) {
    addEvents(initEventHandlers);
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
  }

  return {
    addPlayer,
    init,
    play
  };
}());

videoPlayer.init({
  afterPlayerReady: function initCover() {
    manageCover.init(function playVideo() {
      videoPlayer.play();
    });
  }
});

Here was my attempt: https://jsfiddle.net/3s2p0bxm/

In my attempt here I followed how the code with the array at the bottom was written.

const videoPlayer = (function makeVideoPlayer() {
  const config = {};
  const events = {};
  const eventHandlers = {};
  let player = null;

  function loadIframeScript() {
    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 onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".play");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer, config.playlist);
  }

  function shufflePlaylist(player) {
    player.setShuffle(true);
    player.playVideoAt(0);
    player.stopVideo();
  }

  function onPlayerReady(event) {
    player = event.target;
    player.setVolume(100);
    shufflePlaylist(player);
    const iframe = player.h;
    iframe.dispatchEvent(events.afterPlayerReady);
  }

  function addPlayer(video, playlist) {

    const config = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      width: 640
    };
    config.playerVars = {
      autoplay: 0,
      cc_load_policy: 0,
      controls: 1,
      disablekb: 1,
      fs: 0,
      iv_load_policy: 3,
      loop: 1,
      playlist,
      rel: 0
    };
    config.events = {
      "onReady": onPlayerReady
    };

    player = new YT.Player(video, config);

    const iframe = player.h;
    const eventHandler = eventHandlers.afterPlayerReady;
    iframe.addEventListener("afterPlayerReady", eventHandler);
  }

  function play() {
    player.playVideo();
  }

  function addEvents(handlers) {
    eventHandlers.afterPlayerReady = handlers.afterPlayerReady;
    events.afterPlayerReady = new Event("afterPlayerReady");
  }

  function init(initEventHandlers, videos) {
    addEvents(initEventHandlers);
    config.playlist = videos.join();
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
  }

  return {
    addPlayer,
    init,
    play
  };
}());

videoPlayer.init({
  afterPlayerReady: function initCover() {
    manageCover.init(function playVideo() {
      videoPlayer.play();
    });
  }
});

This is what I am up to:

What I seem to be having difficulty figuring out is,

How to combine this part:

(function initCover() {
  function coverClickHandler() {
    videoPlayer.play();
  }

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

videoPlayer.init([
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
]);

With this code:

videoPlayer.init({
  afterPlayerReady: function initCover() {
    manageCover.init(function playVideo() {
      videoPlayer.play();
    });
  }
});

I’ve gone ahead and unlisted this duplicate topic for you. You don’t need yet another topic on your video player app.

I edited the post, I did not make a new post.

I thought you had told me to do this instead of making a new post.

You completely replaced an old post with a new post. That destroys all previous context for the conversation and defeats half of the purpose of keeping your posts together. Essentially, you made a brand new duplicate post out of an old duplicate post.

However, this project is spread over so many posts that I suppose this one is as good as any to be the single topic for your video player topic. I have re-listed.

1 Like

The topic post still says it is flagged.

I see you fixed that.

It should be fine now.

1 Like

Why am I not able to figure out how to do this?

Here is the code with the array at the bottom: https://jsfiddle.net/bwadtsg4/

videoPlayer.init([
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
]);

Here is the code where I am trying to place the array at the bottom: https://jsfiddle.net/89Leo0dq/

How do I place the array at the bottom in that code?

Here is the working code with the array at the bottom: https://jsfiddle.net/bwadtsg4/

(function initCover() {
  function coverClickHandler() {
    videoPlayer.play();
  }

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

videoPlayer.init([
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
]);

Here is the working code where I am trying to place the array at the bottom: https://jsfiddle.net/89Leo0dq/

videoPlayer.init({
  afterPlayerReady: function initCover() {
    manageCover.init(function playVideo() {
      videoPlayer.play();
    });
  }
});

How do I place the array at the bottom in that code?

And here was as far as I got in my attempt: https://jsfiddle.net/3s2p0bxm/

Where I was able to get up to this part, which is where I got stuck in trying to figure out what to do next in the code.

videoPlayer.init({
  afterPlayerReady: function initCover() {
    manageCover.init(function playVideo() {
      videoPlayer.play();
    });
  }
});

You can’t really expect people to get dropped into some code with no information about anything and come up with a solution. I’m not even sure what a working version would look like.


  1. videoPlayer.init is called with an object. You can add the array of video ids as a property.
videoPlayer.init({
  afterPlayerReady: function initCover() {
    manageCover.init(function playVideo() {
      videoPlayer.play();
    });
  },
  videos: [
    "0dgNc5S8cLI",
    "mnfmQe8Mv1g",
    "CHahce95B1g",
    "2VwsvrPFr9w"
  ]
});
  1. As such the function must accept an object (options object). The argument to videoPlayer.init will be an object with properties which you can then access in the function.
function init(options) {
  addEvents(options.afterPlayerReady);
  config.playlist = options.videos.join();
  loadIframeScript();
  window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
}
  1. You have to change the parameter to addEvents it now is passed the one handler function (I renamed the parameter to handler).
function addEvents(handler) {
  eventHandlers.afterPlayerReady = handler;
  events.afterPlayerReady = new Event("afterPlayerReady");
}

Fork. I have no idea if it is working as intended because I have no idea what that is.

1 Like

@lasjorg

The code seems to work both ways.

Is one way more correct than the other?
or a better way of writing it?

It works, or seems to work the way it was originally written: Code 2

All I did was add this:

}, [
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
]);

It works like this: Code 1 https://jsfiddle.net/y729kuwc/

function addEvents(handler) {
    eventHandlers.afterPlayerReady = handler;
    events.afterPlayerReady = new Event("afterPlayerReady");
  }

  function init(options) {
    addEvents(options.afterPlayerReady);
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
  }

  return {
    addPlayer,
    init,
    play
  };
}());

videoPlayer.init({
  afterPlayerReady: function initCover() {
    manageCover.init(function playVideo() {
      videoPlayer.play();
    });
  }
}, [
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
]);

And it works like this: Code 2 https://jsfiddle.net/8zm6gnwf/

How it was written originally.

function addEvents(handlers) {
    eventHandlers.afterPlayerReady = handlers.afterPlayerReady;
    events.afterPlayerReady = new Event("afterPlayerReady");
  }

  function init(initEventHandlers) {
    addEvents(initEventHandlers);
    loadIframeScript();
    window.onYouTubeIframeAPIReady = onYouTubeIframeAPIReady;
  }

  return {
    addPlayer,
    init,
    play
  };
}());

videoPlayer.init({
  afterPlayerReady: function initCover() {
    manageCover.init(function playVideo() {
      videoPlayer.play();
    });
  }
}, [
  "0dgNc5S8cLI",
  "mnfmQe8Mv1g",
  "CHahce95B1g",
  "2VwsvrPFr9w"
]);

I don’t understand man. You have been working on this project, quite literally, for years.

If you had instead started by learning Javascript basics and then learned about the libraries and frameworks you are using here, you would have a far, far more functional app by this point.

1 Like

Spend some time to go through the freeCodeCamp curriculum, then come back to this project, it will make much more sense

The code works both ways, I just wanted which way is the preferred way.

I really doubt that the full application works the same either way. That would make no sense in this context.

You have made statements like this before only to find out that they are not true. A change like this has some effects. It literally says in the code that there is a difference.

Making some unit tests would really help you determine when your changes break your app.

In order to write unit tests, it would probably help if you learn the fundamentals of the languages, libraries, and frameworks that you are using.

Refactoring your code with unit tests and the fruits of learning foundational knowledge will also make it far easier for anyone to help you with your code.

hey bro can you look at my question, i am waiting for someone to check my qs

Please don’t spam other people’s posts. Thank you!

1 Like