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.