When I make an html page, none of the javasrcipt is working.
Works without an issue in jsfiddle and codepen.
What seems to be the issue?
And how would it be fixed?
I can’t place the code on the page because it is too big.
https://jsfiddle.net/x8jwtsfL/2/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
@javascriptcoding5678 You have to link the Javascript file to the page right before the closing body tag.
<script src="script.js"></script>
</body>
</html>
If you put the Javascript file in a directory called ‘js’ you would do this:
<script src="js/script.js"></script>
</body>
</html>
This is recommended because your code is more organized.
I’m putting in the full javascript code in here, there is no directory.
Can you walk me through how to do this because I don’t understand.
I would add this in with it?
<script src="script/script.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<script>
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")
};
}());
(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-left");
cover.addEventListener("click", coverClickHandler);
}());
(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-right");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function getButtonContainer(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function hideAllButtons(button) {
const buttons = button.querySelectorAll(".play, .pause, .speaker");
for (let i = 0; i < buttons.length; i += 1) {
hide(buttons[i]);
}
}
function getPlay(button) {
return button.querySelector(".play");
}
function getPause(button) {
return button.querySelector(".pause");
}
function showPlayButton(button) {
const play = getPlay(button);
hideAllButtons(button);
show(play);
button.classList.remove("active");
}
function isPlaying(button) {
const play = getPlay(button);
return play.classList.contains("hide");
}
function pauseAllButtons() {
let buttons = document.querySelectorAll(".playButton");
for (let i = 0; i < buttons.length; i += 1) {
if (isPlaying(buttons[i])) {
showPlayButton(buttons[i]);
}
}
}
function showPauseButton(button) {
const pause = getPause(button);
pauseAllButtons();
hideAllButtons(button);
show(pause);
button.classList.add("active");
}
function getAudio() {
return document.querySelector("audio");
}
function playAudio(player, src) {
player.volume = 1.0;
if (player.getAttribute("src") !== src) {
player.setAttribute("src", src);
}
player.play();
}
function showButton(button, opts) {
if (opts.playing) {
showPlayButton(button);
} else {
showPauseButton(button);
}
}
function pauseAudio(player) {
player.pause();
}
function manageAudio(player, opts) {
if (opts.playing) {
pauseAudio(player);
} else {
playAudio(player, opts.src);
}
}
function togglePlayButton(button) {
const player = getAudio();
const playing = isPlaying(button);
showButton(button, {
playing
});
manageAudio(player, {
src: button.getAttribute("data-audio"),
playing
});
}
function playButtonClickHandler(evt) {
const button = getButtonContainer(evt.target);
togglePlayButton(button);
}
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
}
initButton(".wrapa");
}());
(function manageCover() {
"use strict";
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
}
const cover = document.querySelector(".jacketc");
cover.addEventListener("click", coverClickHandler);
}());
(function manageCover() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const thewrap = cover.parentNode.querySelector(".wraph");
hide(cover);
show(thewrap);
}
const cover = document.querySelector(".jacketd ");
cover.addEventListener("click", coverClickHandler);
}());
const videoPlayer = (function makeVideoPlayer() {
"use strict";
const players = [];
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100); // percent
}
let hasShuffled = false;
function onPlayerStateChange(event) {
const player = event.target;
if (!hasShuffled) {
player.setShuffle(true);
player.playVideoAt(0);
hasShuffled = true;
}
if (event.data === YT.PlayerState.PLAYING) {
for (let i = 0; i < players.length; i++) {
if (players[i] !== event.target) players[i].pauseVideo();
}
}
const playerVars = player.b.b.playerVars;
if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
player.seekTo(playerVars.start);
}
}
function addVideo(video, settings) {
players.push(new YT.Player(video, Object.assign({
videoId: video.dataset.id,
host: "https://www.youtube-nocookie.com",
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
}, settings)));
}
function init(video, settings) {
load.js("https://www.youtube.com/player_api").then(function () {
YT.ready(function () {
addVideo(video, settings);
});
});
}
return {
init
};
}());
function loadPlayer(opts) {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function initPlayer(wrapper) {
const video = wrapper.querySelector(".video");
opts.width = opts.width || 198;
opts.height = opts.height || 198;
opts.autoplay = 1;
opts.controls = 1;
opts.rel = 0;
opts.iv_load_policy = 3;
opts.fs = 0;
opts.disablekb = 1;
function paramInOpts(settings, param) {
if (opts[param] !== undefined) {
settings[param] = opts[param];
}
return settings;
}
const settingsParams = ["width", "height", "videoid", "host"];
const settings = settingsParams.reduce(paramInOpts, {});
const playerVarsParams = ["autoplay", "cc_load_policy",
"controls", "disablekb", "end", "fs", "iv_load_policy",
"list", "listType", "loop", "playlist", "rel", "start"
];
settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
videoPlayer.init(video, settings);
}
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
initPlayer(wrapper);
}
const cover = document.querySelector(opts.target);
cover.addEventListener("click", coverClickHandler);
}
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";
loadPlayer({
target: ".jacket-left",
width: 424,
height: 238
});
loadPlayer({
target: ".jacket-right",
width: 424,
height: 238
});
loadPlayer({
target: ".jacketc",
width: 600,
height: 338,
loop: true,
playlist
});
loadPlayer({
target: ".alpha",
start: 0,
end: 280,
loop: true
});
loadPlayer({
target: ".beta",
start: 0,
end: 240,
loop: true
});
loadPlayer({
target: ".gamma",
start: 0,
end: 265,
loop: true
});
loadPlayer({
target: ".delta",
start: 4,
end: 254,
loop: true
});
loadPlayer({
target: ".epsilon",
start: 0,
end: 242,
loop: true
});
loadPlayer({
target: ".zeta",
start: 0,
end: 285,
loop: true
});
loadPlayer({
target: ".eta",
start: 23,
end: 312,
loop: true
});
loadPlayer({
target: ".theta",
start: 2
});
loadPlayer({
target: ".iota"
});
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function getButtonContainer(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function hideAllButtons(button) {
const buttons = button.querySelectorAll(".play, .pause, .speaker");
for (let i = 0; i < buttons.length; i += 1) {
hide(buttons[i]);
}
}
function getPlay(button) {
return button.querySelector(".play ");
}
function getPause(button) {
return button.querySelector(".pause");
}
function getSpeaker(button) {
return button.querySelector(".speaker");
}
function showPlayButton(button) {
const play = getPlay(button);
hideAllButtons(button);
show(play);
button.classList.remove("active");
}
function isPlaying(button) {
const play = getPlay(button);
return play.classList.contains("hide");
}
function pauseAllButtons() {
const buttons = document.querySelectorAll(".playButton");
for (let i = 0; i < buttons.length; i += 1) {
if (isPlaying(buttons[i])) {
showPlayButton(buttons[i]);
}
}
}
function showPauseButton(button) {
const pause = getPause(button);
pauseAllButtons();
hideAllButtons(button);
show(pause);
button.classList.add("activated");
}
function showSpeakerButton(button) {
const speaker = getSpeaker(button);
hideAllButtons(button);
show(speaker);
}
function getAudio() {
return document.querySelector("audio");
}
function playAudio(player, src) {
player.volume = 1.0;
if (player.getAttribute("src") !== src) {
player.setAttribute("src", src);
}
player.play();
}
function showButton(button, opts) {
if (opts.playing) {
showPlayButton(button);
} else {
showPauseButton(button);
}
}
function pauseAudio(player) {
player.pause();
}
function manageAudio(player, opts) {
if (opts.playing) {
pauseAudio(player);
} else {
playAudio(player, opts.src);
}
}
function playButton(button) {
const player = getAudio();
const playing = isPlaying(button);
showButton(button, {
playing
});
manageAudio(player, {
src: button.getAttribute("data-audio"),
playing
});
}
function showPause(button) {
if (isPlaying(button)) {
showPauseButton(button);
}
}
function showSpeaker(button) {
if (isPlaying(button)) {
showSpeakerButton(button);
}
}
function playButtonClickHandler(evt) {
const button = getButtonContainer(evt.target);
playButton(button);
}
function playButtonMouseoverHandler(evt) {
const button = getButtonContainer(evt.target);
showPause(button);
}
function playButtonMouseoutHandler(evt) {
const button = getButtonContainer(evt.target);
showSpeaker(button);
}
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
wrapper.addEventListener("mouseover", playButtonMouseoverHandler);
wrapper.addEventListener("mouseout", playButtonMouseoutHandler);
}
initButton(".wrapb");
}());
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function getButtonContainer(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function hideAllButtons(button) {
const buttons = button.querySelectorAll(".play, .pause, .speaker");
for (let i = 0; i < buttons.length; i += 1) {
hide(buttons[i]);
}
}
function getPlay(button) {
return button.querySelector(".play");
}
function getPause(button) {
return button.querySelector(".pause");
}
function showPlayButton(button) {
const play = getPlay(button);
hideAllButtons(button);
show(play);
button.classList.remove("active");
}
function isPlaying(button) {
const play = getPlay(button);
return play.classList.contains("hide");
}
function pauseAllButtons() {
let buttons = document.querySelectorAll(".playButton");
for (let i = 0; i < buttons.length; i += 1) {
if (isPlaying(buttons[i])) {
showPlayButton(buttons[i]);
}
}
}
function showPauseButton(button) {
const pause = getPause(button);
pauseAllButtons();
hideAllButtons(button);
show(pause);
}
function getAudio() {
return document.querySelector("audio");
}
function playAudio(player, src) {
player.volume = 1.0;
if (player.getAttribute("src") !== src) {
player.setAttribute("src", src);
}
player.play();
}
function showButton(button, opts) {
if (opts.playing) {
showPlayButton(button);
} else {
showPauseButton(button);
}
}
function pauseAudio(player) {
player.pause();
}
function manageAudio(player, opts) {
if (opts.playing) {
pauseAudio(player);
} else {
playAudio(player, opts.src);
}
}
function playButton(button) {
const player = getAudio();
const playing = isPlaying(button);
showButton(button, {
playing
});
manageAudio(player, {
src: button.getAttribute("data-audio"),
playing
});
}
function playButtonClickHandler(evt) {
const button = getButtonContainer(evt.target);
playButton(button);
}
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
}
initButton(".wrapc");
}());
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function getButtonContainer(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function hideAllButtons(button) {
const buttons = button.querySelectorAll(".play, .pause, .speaker");
for (let i = 0; i < buttons.length; i += 1) {
hide(buttons[i]);
}
}
function getPlay(button) {
return button.querySelector(".play");
}
function getPause(button) {
return button.querySelector(".pause");
}
function showPlayButton(button) {
const play = getPlay(button);
hideAllButtons(button);
show(play);
button.classList.remove("active");
}
function isPlaying(button) {
const play = getPlay(button);
return play.classList.contains("hide");
}
function pauseAllButtons() {
let buttons = document.querySelectorAll(".playButton");
for (let i = 0; i < buttons.length; i += 1) {
if (isPlaying(buttons[i])) {
showPlayButton(buttons[i]);
}
}
}
function showPauseButton(button) {
const pause = getPause(button);
pauseAllButtons();
hideAllButtons(button);
show(pause);
}
function getAudio() {
return document.querySelector("audio");
}
function playAudio(player, src) {
player.volume = 1.0;
if (player.getAttribute("src") !== src) {
player.setAttribute("src", src);
}
player.play();
}
function showButton(button, opts) {
if (opts.playing) {
showPlayButton(button);
} else {
showPauseButton(button);
}
}
function pauseAudio(player) {
player.pause();
}
function manageAudio(player, opts) {
if (opts.playing) {
pauseAudio(player);
} else {
playAudio(player, opts.src);
}
}
function togglePlayButton(button) {
const player = getAudio();
const playing = isPlaying(button);
showButton(button, {
playing
});
manageAudio(player, {
src: button.getAttribute("data-audio"),
playing
});
}
function playButtonClickHandler(evt) {
const button = getButtonContainer(evt.target);
togglePlayButton(button);
}
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
}
initButton(".wrapd");
}());
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const thewrap = cover.parentNode.querySelector(".wrape");
hide(cover);
show(thewrap);
}
const cover = document.querySelector(".jacketb ");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function getButtonContainer(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function hideAllButtons(button) {
const buttons = button.querySelectorAll(".play, .pause, .speaker");
for (let i = 0; i < buttons.length; i += 1) {
hide(buttons[i]);
}
}
function getPlay(button) {
return button.querySelector(".play");
}
function getPause(button) {
return button.querySelector(".pause");
}
function showPlayButton(button) {
const play = getPlay(button);
hideAllButtons(button);
show(play);
button.classList.remove("active");
}
function isPlaying(button) {
const play = getPlay(button);
return play.classList.contains("hide");
}
function pauseAllButtons() {
let buttons = document.querySelectorAll(".playButton");
for (let i = 0; i < buttons.length; i += 1) {
if (isPlaying(buttons[i])) {
showPlayButton(buttons[i]);
}
}
}
function showPauseButton(button) {
const pause = getPause(button);
pauseAllButtons();
hideAllButtons(button);
show(pause);
}
function getAudio() {
return document.querySelector("audio");
}
function playAudio(player, src) {
player.volume = 1.0;
if (player.getAttribute("src") !== src) {
player.setAttribute("src", src);
}
player.play();
}
function showButton(button, opts) {
if (opts.playing) {
showPlayButton(button);
} else {
showPauseButton(button);
}
}
function pauseAudio(player) {
player.pause();
}
function manageAudio(player, opts) {
if (opts.playing) {
pauseAudio(player);
} else {
playAudio(player, opts.src);
}
}
function togglePlayButton(button) {
const player = getAudio();
const playing = isPlaying(button);
showButton(button, {
playing
});
manageAudio(player, {
src: button.getAttribute("data-audio"),
playing
});
}
function playButtonClickHandler(evt) {
const button = getButtonContainer(evt.target);
togglePlayButton(button);
}
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
}
initButton(".wrape");
}());
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function getButtonContainer(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function hideAllButtons(button) {
const buttons = button.querySelectorAll(".play, .pause, .speaker");
for (let i = 0; i < buttons.length; i += 1) {
hide(buttons[i]);
}
}
function getPlay(button) {
return button.querySelector(".play");
}
function getPause(button) {
return button.querySelector(".pause");
}
function showPlayButton(button) {
const play = getPlay(button);
hideAllButtons(button);
show(play);
button.classList.remove("active");
}
function isPlaying(button) {
const play = getPlay(button);
return play.classList.contains("hide");
}
function pauseAllButtons() {
let buttons = document.querySelectorAll(".playButton");
for (let i = 0; i < buttons.length; i += 1) {
if (isPlaying(buttons[i])) {
showPlayButton(buttons[i]);
}
}
}
function showPauseButton(button) {
const pause = getPause(button);
pauseAllButtons();
hideAllButtons(button);
show(pause);
}
function getAudio() {
return document.querySelector("audio");
}
function playAudio(player, src) {
player.volume = 1.0;
if (player.getAttribute("src") !== src) {
player.setAttribute("src", src);
}
player.play();
}
function showButton(button, opts) {
if (opts.playing) {
showPlayButton(button);
} else {
showPauseButton(button);
}
}
function pauseAudio(player) {
player.pause();
}
function manageAudio(player, opts) {
if (opts.playing) {
pauseAudio(player);
} else {
playAudio(player, opts.src);
}
}
function togglePlayButton(button) {
const player = getAudio();
const playing = isPlaying(button);
showButton(button, {
playing
});
manageAudio(player, {
src: button.getAttribute("data-audio"),
playing
});
}
function playButtonClickHandler(evt) {
const button = getButtonContainer(evt.target);
togglePlayButton(button);
}
function initButton(selector) {
const wrapper = document.querySelector(selector);
wrapper.addEventListener("click", playButtonClickHandler);
}
initButton(".wrapf");
}());
</script>
</body>
</html>
Only the YouTube portions aren’t loading.
It works perfectly fine set up like this in jsfiddle, but not an html page.
When I put it in notepad the YouTube stuff no-longer works.
https://jsfiddle.net/wphsrfu9/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
When I click on the YouTube stuff these errors pop up.
file:///C:/Users/Desktop/test.html
I found the same issue being reported here.
SyntaxError: illegal character
player_api:1:1
if (!window['YT']) {var YT = {loading: 0,loaded: 0};}if (!window['YTConfig']) {var YTConfig = {'host': 'http://www.youtube.com'};}if (!YT.loading) {YT.loading = 1;(function(){var l = [];YT.ready = function(f) {if (YT.loaded) {f();} else {l.push(f);}};window.onYTReady = function() {YT.loaded = 1;for (var i = 0; i < l.length; i++) {try {l[i]();} catch (e) {}}};YT.setConfig = function(c) {for (var k in c) {if (c.hasOwnProperty(k)) {YTConfig[k] = c[k];}}};var a = document.createElement('script');a.type = 'text/javascript';a.id = 'www-widgetapi-script';a.src = 'https://s.ytimg.com/yts/jsbin/www-widgetapi-vfl_QvS8o/www-widgetapi.js';a.async = true;var c = document.currentScript;if (c) {var n = c.nonce || c.getAttribute('nonce');if (n) {a.setAttribute('nonce', n);}}var b = document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a, b);})();}
Prettified
if (!window['YT']) {
var YT = {
loading: 0,
loaded: 0
};
}
if (!window['YTConfig']) {
var YTConfig = {
'host': 'http://www.youtube.com'
};
}
if (!YT.loading) {
YT.loading = 1;
(function() {
var l = [];
YT.ready = function(f) {
if (YT.loaded) {
f();
} else {
l.push(f);
}
};
window.onYTReady = function() {
YT.loaded = 1;
for (var i = 0; i < l.length; i++) {
try {
l[i]();
} catch (e) {}
}
};
YT.setConfig = function(c) {
for (var k in c) {
if (c.hasOwnProperty(k)) {
YTConfig[k] = c[k];
}
}
};
var a = document.createElement('script');
a.type = 'text/javascript';
a.id = 'www-widgetapi-script';
a.src = 'https:' + '//s.ytimg.com/yts/jsbin/www-widgetapi-vfl3zSWzk/www-widgetapi.js';
a.async = true;
var b = document.getElementsByTagName('script')[0];
b.parentNode.insertBefore(a, b);
})();
}
ReferenceError: YT is not defined
test.html:1610:13
function init(video, settings) {
load.js("https://www.youtube.com/player_api").then(function () {
YT.ready(function () {
addVideo(video, settings);
});
How would I resolve the issue.
This is the javascript I’m using.
const videoPlayer = (function makeVideoPlayer() {
"use strict";
const players = [];
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100); // percent
}
let hasShuffled = false;
function onPlayerStateChange(event) {
const player = event.target;
if (!hasShuffled) {
player.setShuffle(true);
player.playVideoAt(0);
hasShuffled = true;
}
if (event.data === YT.PlayerState.PLAYING) {
for (let i = 0; i < players.length; i++) {
if (players[i] !== event.target) players[i].pauseVideo();
}
}
const playerVars = player.b.b.playerVars;
if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
player.seekTo(playerVars.start);
}
}
function addVideo(video, settings) {
players.push(new YT.Player(video, Object.assign({
videoId: video.dataset.id,
host: "https://www.youtube-nocookie.com",
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
}, settings)));
}
function init(video, settings) {
load.js("https://www.youtube.com/player_api").then(function () {
YT.ready(function () {
addVideo(video, settings);
});
});
}
return {
init
};
}());
function loadPlayer(opts) {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function initPlayer(wrapper) {
const video = wrapper.querySelector(".video");
opts.width = opts.width || 198;
opts.height = opts.height || 198;
opts.autoplay = 1;
opts.controls = 1;
opts.rel = 0;
opts.iv_load_policy = 3;
opts.fs = 0;
opts.disablekb = 1;
function paramInOpts(settings, param) {
if (opts[param] !== undefined) {
settings[param] = opts[param];
}
return settings;
}
const settingsParams = ["width", "height", "videoid", "host"];
const settings = settingsParams.reduce(paramInOpts, {});
const playerVarsParams = ["autoplay", "cc_load_policy",
"controls", "disablekb", "end", "fs", "iv_load_policy",
"list", "listType", "loop", "playlist", "rel", "start"
];
settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
videoPlayer.init(video, settings);
}
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
initPlayer(wrapper);
}
const cover = document.querySelector(opts.target);
cover.addEventListener("click", coverClickHandler);
}
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";
loadPlayer({
target: ".jacket-left",
width: 424,
height: 238
});
loadPlayer({
target: ".jacket-right",
width: 424,
height: 238
});
loadPlayer({
target: ".jacketc",
width: 600,
height: 338,
loop: true,
playlist
});
loadPlayer({
target: ".alpha",
start: 0,
end: 280,
loop: true
});
loadPlayer({
target: ".beta",
start: 0,
end: 240,
loop: true
});
loadPlayer({
target: ".gamma",
start: 0,
end: 265,
loop: true
});
loadPlayer({
target: ".delta",
start: 4,
end: 254,
loop: true
});
loadPlayer({
target: ".epsilon",
start: 0,
end: 242,
loop: true
});
loadPlayer({
target: ".zeta",
start: 0,
end: 285,
loop: true
});
loadPlayer({
target: ".eta",
start: 23,
end: 312,
loop: true
});
loadPlayer({
target: ".theta",
start: 2
});
loadPlayer({
target: ".iota"
});
I just removed everything except for the YouTube code.
The same errors are coming up in inspect inside an html page.
https://jsfiddle.net/3mxdzt4u/7/
Html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My HTML Document</title>
<style type="text/css">
html,
body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background: #353198;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.container {
width: 990px;
padding: 25px;
overflow: hidden;
margin: 100px auto;
border-radius: 25px;
border: 2px solid #0059dd;
box-sizing: border-box;
background: #000000;
}
.container-top {
position: relative;
height: 310px;
margin: 0 0 45px 0;
border-radius: 25px;
border: 3px solid #0059dd;
box-sizing: border-box;
background: url("https://i.imgur.com/jEMIULl.jpg") no-repeat 0 0;
background-size: cover;
}
.video-contain {
position: relative;
top: 50%;
transform: translateY(-50%);
float: left;
margin-left: 25px;
width: 277px;
background: red;
border-radius: 25px;
}
.jacket {
position: relative;
width: 80px;
height: 80px;
margin: auto;
background: url("https://i.imgur.com/fzdYu8g.jpg") no-repeat 0 0;
background-size: 100% 200%;
}
.jacket-middle {
background-position: 0 -80px;
background-size: 100% 200%;
}
.jacket-right {
background-position: 0 -80px;
background-size: 100% 200%;
}
.jacket .circle {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
box-sizing: border-box;
border: 1px solid #0059dd;
border-radius: 50%;
cursor: pointer;
background: rgba(0, 0, 0, 0.5);
transition: transform 0.1s ease 0s;
box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
}
.jacket .play {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 38px;
height: 22px;
fill: #0059dd;
}
..jacket .circle:hover {
border: 1px solid red;
transform: scale(1.1);
}
.jacket .circle:hover .play {
fill: red;
}
.wrap {
position: relative;
width: 277px;
height: 207px;
cursor: pointer;
overflow: hidden;
border-radius: 25px;
}
.wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 277px;
height: 207px;
cursor: pointer;
}
.container-left {
float: left;
width: 606px;
margin: 0;
}
.container-left .jacketc {
position: relative;
height: 344px;
cursor: pointer;
margin: 45px 0 0 0;
border-radius: 25px;
border: 3px solid #0059dd;
box-sizing: border-box;
background: url("https://i.imgur.com/gI9vM6E.jpg") no-repeat 0 0;
background-size: cover;
}
.container-left .jacketc .play {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
fill: #fa33fc;
}
.container-left .jacketc .lines::before,
.container-left .jacketc .lines::after {
content: "";
position: absolute;
top: 0;
left: 198px;
width: 3px;
height: 100%;
background: #0059dd;
}
.container-left .jacketc .lines::after {
left: 399px;
}
.container-left .wrapg {
position: relative;
height: 344px;
margin: 45px 0 0 0;
cursor: pointer;
overflow: hidden;
border-radius: 25px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.container-left .wrapg iframe {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 338px;
cursor: pointer;
}
.container-left .wrapg .lines::before,
.container-left .wrapg .lines::after {
content: "";
position: absolute;
top: 0;
left: 198px;
width: 3px;
height: 100%;
background: #0059dd;
}
.container-left .wrapg .lines::after {
left: 399px;
}
.container-left .jacketd {
position: relative;
height: 606px;
cursor: pointer;
margin: 45px 0 0 0;
border-radius: 25px;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.container-left .jacketd,
.container-left .wraph {
background: url("https://i.imgur.com/baApP9x.png") no-repeat 0 0;
background-size: 100% 200%;
}
.container-left .jacketd .coversvg {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
cursor: pointer;
}
.container-left .jacketd .coversvg path {
fill: none;
stroke: #08f9ff;
stroke-miterlimit: 10;
stroke-width: 4px;
}
.container-left .jacketd .lines::before,
.container-left .jacketd .lines::after {
content: "";
position: absolute;
top: 0;
left: 198px;
width: 3px;
height: 100%;
background: #0059dd;
}
.container-left .jacketd .lines::after {
left: 399px;
}
.container-left .wraph {
position: relative;
width: 606px;
margin: 45px 0 0 0;
overflow: hidden;
border-radius: 25px;
border: 3px solid #0059dd;
box-sizing: border-box;
background-position: 0 -600px;
background-size: 100% 200%;
}
.container-left .wraph .nav {
margin: 0;
padding: 0;
list-style: none;
}
.container-left .wraph .nav li {
margin: 0;
padding: 0;
float: left;
}
.container-left .wraph .nav li {
float: left;
width: 198px;
height: 198px;
margin: 0 0 3px 0;
background: rgba(0, 0, 0, 0.2);
}
.container-left .wraph .nav li:nth-of-type(3n+2) {
margin: 0 3px 0 3px;
}
.container-left .wraph .nav li:nth-of-type(n+7) {
margin-bottom: 0;
}
.container-left .wraph .nav li svg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
fill: transparent;
}
.container-left .wraph .nav li svg:hover path {
fill: #0059dd;
}
.container-left .wraph .linesa::before,
.container-left .wraph .linesa::after {
content: "";
position: absolute;
top: 0;
left: 198px;
width: 3px;
height: 100%;
background: #0059dd;
}
.container-left .wraph .linesa::after {
left: 399px;
}
.container-left .wraph .linesb::before,
.container-left .wraph .linesb::after {
content: "";
position: absolute;
top: 198px;
left: 0;
width: 100%;
height: 3px;
background: #0059dd;
}
.container-left .wraph .linesb::after {
top: 399px;
}
.container-left .wraph .nav li iframe {
position: absolute;
top: 0;
left: 0;
width: 198px;
height: 198px;
cursor: pointer;
}
.container-left .wraph .nav li .alpha,
.playinga {
margin: 0;
}
.container-left .wraph .nav li .beta,
.playingb {
margin: 0 201px 0;
}
.container-left .wraph .nav li .gamma,
.playingc {
margin: 0 402px 0;
}
.container-left .wraph .nav li .delta,
.playingd {
margin: 201px 0 0;
}
.container-left .wraph .nav li .epsilon,
.playinge {
margin: 201px 201px 0;
}
.container-left .wraph .nav li .zeta,
.playingf {
margin: 201px 402px 0;
}
.container-left .wraph .nav li .eta,
.playingg {
margin: 402px 0 0;
}
.container-left .wraph .nav li .theta,
.playingh {
margin: 402px 201px 0;
}
.container-left .wraph .nav li .iota,
.playingi {
margin: 402px 402px 0;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="tcell">
<audio></audio>
<div class="container ">
<div class="container-top">
<div class="video-contain">
<div class="jacket jacket-left">
<div class="circle">
<svg class="play" width="38" height="22" viewBox="0 0 26 26">
<title>Play</title>
<path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
</svg>
</div>
</div>
<div class="wrap hide">
<div class="video" data-id="jMAShwisnQI"></div>
</div>
</div>
<div class="video-contain">
<div class="jacket jacket-middle">
<div class="circle">
<svg class="play" width="38" height="22" viewBox="0 0 26 26">
<title>Play</title>
<path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
</svg>
</div>
</div>
<div class="wrap hide">
<div class="video" data-id="-SiGnAi845o"></div>
</div>
</div>
<div class="video-contain">
<div class="jacket jacket-right">
<div class="circle">
<svg class="play" width="38" height="22" viewBox="0 0 26 26">
<title>Play</title>
<path d="M7.712 22.04a.732.732 0 0 1-.806.007.767.767 0 0 1-.406-.703V4.656c0-.31.135-.544.406-.703.271-.16.54-.157.806.006l14.458 8.332c.266.163.4.4.4.709 0 .31-.134.546-.4.71L7.712 22.04z" fill-rule="evenodd" />
</svg>
</div>
</div>
<div class="wrap hide">
<div class="video" data-id="-SiGnAi845o"></div>
</div>
</div>
</div>
<div class="container-left">
<div class="jacketc">
<svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="lines"></div>
</div>
<div class="wrapg hide">
<div class="video" data-id="olhhsjFBpA4"></div>
<div class="lines"></div>
</div>
<div class="jacketd" title="OPEN">
<svg class="coversvg" width="198" height="198" viewBox="0 0 47.96 51.66">
<title>Open</title>
<path d="M2,25.83V4.11A2.11,2.11,0,0,1,5.13,2.27L44.88,24.45a2.11,2.11,0,0,1,0,3.7L5.1,49.41A2.11,2.11,0,0,1,2,47.55V25.83" />
</svg>
<div class="lines"></div>
</div>
<div class="hide wraph">
<ul class="nav">
<li>
<svg class="alpha" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playinga" data-id="ZPz3wzPlruA"></div>
</div>
</li>
<li>
<svg class="beta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingb" data-id="VFMtNOxpV3o"></div>
</div>
</li>
<li>
<svg class="gamma" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingc" data-id="Zkf4EDjV1_g"></div>
</div>
</li>
<li>
<svg class="delta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingd" data-id="-Xgi_way56U"></div>
</div>
</li>
<li>
<svg class="epsilon" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playinge" data-id="EK3h0IADYrQ"></div>
</div>
</li>
<li>
<svg class="zeta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingf" data-id="YOw9J4K02H4"></div>
</div>
</li>
<li>
<svg class="eta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingg" data-id="ID856YDIb6A"></div>
</div>
</li>
<li>
<svg class="theta" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingh" data-id="VRtMZDJdIIU"></div>
</div>
</li>
<li>
<svg class="iota" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<title>Play</title>
<path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z" />
<path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z" />
</svg>
<div class="hide">
<div class="video playingi" data-id="qYEooPeyz5M"></div>
</div>
</li>
</ul>
<div class="linesa"></div>
<div class="linesb"></div>
</div>
</div>
</div>
</div>
</div>
<script>
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")
};
}());
(function manageCover() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const thewrap = cover.parentNode.querySelector(".wraph");
hide(cover);
show(thewrap);
}
const cover = document.querySelector(".jacketd ");
cover.addEventListener("click", coverClickHandler);
}());
const videoPlayer = (function makeVideoPlayer() {
"use strict";
const players = [];
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100); // percent
}
let hasShuffled = false;
function onPlayerStateChange(event) {
const player = event.target;
if (!hasShuffled) {
player.setShuffle(true);
player.playVideoAt(0);
hasShuffled = true;
}
if (event.data === YT.PlayerState.PLAYING) {
for (let i = 0; i < players.length; i++) {
if (players[i] !== event.target) players[i].pauseVideo();
}
}
const playerVars = player.b.b.playerVars;
if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
player.seekTo(playerVars.start);
}
}
function addVideo(video, settings) {
players.push(new YT.Player(video, Object.assign({
videoId: video.dataset.id,
host: "https://www.youtube-nocookie.com",
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
}, settings)));
}
function init(video, settings) {
load.js("https://www.youtube.com/player_api").then(function () {
YT.ready(function () {
addVideo(video, settings);
});
});
}
return {
init
};
}());
function loadPlayer(opts) {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function initPlayer(wrapper) {
const video = wrapper.querySelector(".video");
opts.width = opts.width || 198;
opts.height = opts.height || 198;
opts.autoplay = 1;
opts.controls = 1;
opts.rel = 0;
opts.iv_load_policy = 3;
opts.fs = 0;
opts.disablekb = 1;
function paramInOpts(settings, param) {
if (opts[param] !== undefined) {
settings[param] = opts[param];
}
return settings;
}
const settingsParams = ["width", "height", "videoid", "host"];
const settings = settingsParams.reduce(paramInOpts, {});
const playerVarsParams = ["autoplay", "cc_load_policy",
"controls", "disablekb", "end", "fs", "iv_load_policy",
"list", "listType", "loop", "playlist", "rel", "start"
];
settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
videoPlayer.init(video, settings);
}
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
initPlayer(wrapper);
evt.currentTarget.classList.add("hide");
}
const cover = document.querySelector(opts.target);
cover.addEventListener("click", coverClickHandler);
}
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";
loadPlayer({
target: ".jacket-left",
width: 424,
height: 238
});
loadPlayer({
target: ".jacket-middle",
width: 424,
height: 238
});
loadPlayer({
target: ".jacket-right",
width: 424,
height: 238
});
loadPlayer({
target: ".jacketc",
width: 600,
height: 338,
loop: true,
playlist
});
loadPlayer({
target: ".alpha",
start: 0,
end: 280,
loop: true
});
loadPlayer({
target: ".beta",
start: 0,
end: 240,
loop: true
});
loadPlayer({
target: ".gamma",
start: 0,
end: 265,
loop: true
});
loadPlayer({
target: ".delta",
start: 4,
end: 254,
loop: true
});
loadPlayer({
target: ".epsilon",
start: 0,
end: 242,
loop: true
});
loadPlayer({
target: ".zeta",
start: 0,
end: 285,
loop: true
});
loadPlayer({
target: ".eta",
start: 23,
end: 312,
loop: true
});
loadPlayer({
target: ".theta",
start: 2
});
loadPlayer({
target: ".iota"
});
</script>
</body>
</html>