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