You had said this: There was more to my recommendation too.
So I thought there was more I had to do.
You had said this: There was more to my recommendation too.
So I thought there was more I had to do.
I see how they both don’t work together:
The api wins.
You only showed the first line of my recommendation in your code listing.
It was the rest of my recommendation (the last of two lines) that I was referring to.
You were referring to a different post of mine, not the I got it one.
I got it.
I’m stuck trying to figure out how I would get these to open.
This one is set up differently, but I don’t understand why none of the boxes are opening.
How would I have gotten it to work?
Everything I’m trying is not working.
I left the first 2 open, and the rest blacked out so once those are working, I can then transfer that to the others too.
I don’t understand why when I click on the 2nd box it’s not opening.
It stays hidden behind the image.
const videoPlayer = (function makeVideoPlayer() {
"use strict";
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);
}
function onPlayerReady(event) {
const youtubePlayer = event.target;
youtubePlayer.setVolume(50); // percent
}
window.onYouTubePlayerAPIReady = function() {
const video = document.querySelector(".video");
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 606,
height: 344,
videoId: videoId,
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() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init();
}
const cover = document.querySelector(".playa");
cover.addEventListener("click", coverClickHandler);
}());
const videoPlayerb = (function makeVideoPlayer() {
"use strict";
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);
}
function onPlayerReady(event) {
const youtubePlayer = event.target;
youtubePlayer.setVolume(50); // percent
}
window.onYouTubePlayerAPIReady = function() {
const video = document.querySelector(".video");
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 606,
height: 344,
videoId: videoId,
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() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayerb.init();
}
const cover = document.querySelector(".playb");
cover.addEventListener("click", coverClickHandler);
}());
When it’s set up like this, how come the 2nd box won’t open?
And how would I be able to get it to open?
<div class="wrap">
<svg class="playa" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<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>
<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"></path>
</svg>
<div class="hide">
<div class="video playinga" data-id="M7lc1UVf-VE"></div>
</div>
<svg class="playb" width="198" height="198" viewbox="8.5 -12.2 7 48.49">
<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>
<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"></path>
</svg>
<div class="hide">
<div class="video playingb" data-id="M7lc1UVf-VE"></div>
</div>
<div class="linesa"></div>
<div class="linesb"></div>
</div>
const videoPlayer = (function makeVideoPlayer() {
"use strict";
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);
}
function onPlayerReady(event) {
const youtubePlayer = event.target;
youtubePlayer.setVolume(50); // percent
}
window.onYouTubePlayerAPIReady = function() {
const video = document.querySelector(".video");
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 606,
height: 344,
videoId: videoId,
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() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init();
}
const cover = document.querySelector(".playa");
cover.addEventListener("click", coverClickHandler);
}());
const videoPlayerb = (function makeVideoPlayer() {
"use strict";
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);
}
function onPlayerReady(event) {
const youtubePlayer = event.target;
youtubePlayer.setVolume(50); // percent
}
window.onYouTubePlayerAPIReady = function() {
const video = document.querySelector(".video");
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 606,
height: 344,
videoId: videoId,
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() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayerb.init();
}
const cover = document.querySelector(".playb");
cover.addEventListener("click", coverClickHandler);
}());
If I wanted to set different PlayVars for each video
How would this be done?
Working version: Only 1 PlayVars.
How would I add 8 of those to that?
const videoPlayer = (function makeVideoPlayer() {
"use strict";
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);
}
function onPlayerReady(event) {
const player = event.target;
player.setVolume(50); // percent
}
function addVideoa(video) {
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 200,
height: 200,
videoId: videoId,
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 addVideob(video) {
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 200,
height: 200,
videoId: videoId,
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 addVideoc(video) {
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 200,
height: 200,
videoId: videoId,
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 addVideod(video) {
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 200,
height: 200,
videoId: videoId,
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 addVideoe(video) {
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 200,
height: 200,
videoId: videoId,
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 addVideof(video) {
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 200,
height: 200,
videoId: videoId,
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 addVideog(video) {
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 200,
height: 200,
videoId: videoId,
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 addVideoh(video) {
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 200,
height: 200,
videoId: videoId,
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 addVideoi(video) {
const videoId = video.getAttribute("data-id");
new YT.Player(video, {
width: 200,
height: 200,
videoId: videoId,
playerVars: {
autoplay: 0,
controls: 1,
showinfo: 1,
rel: 0,
iv_load_policy: 3,
cc_load_policy: 0,
fs: 0,
disablekb: 1
},
events: {
"onReady": onPlayerReady
}
});
}
let apiIsReady = false;
let timer;
window.onYouTubePlayerAPIReady = function() {
apiIsReady = true;
}
function init(video) {
loadPlayer();
timer = setInterval(function checkAPIReady() {
if (apiIsReady) {
timer = clearInterval(timer);
addVideo(video);
}
}, 1);
}
return {
init
};
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init(wrapper.querySelector(".video"));
}
const cover = document.querySelector(".playa");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init(wrapper.querySelector(".video"));
}
const cover = document.querySelector(".playb");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init(wrapper.querySelector(".video"));
}
const cover = document.querySelector(".playc");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init(wrapper.querySelector(".video"));
}
const cover = document.querySelector(".playd");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init(wrapper.querySelector(".video"));
}
const cover = document.querySelector(".playe");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init(wrapper.querySelector(".video"));
}
const cover = document.querySelector(".playf");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init(wrapper.querySelector(".video"));
}
const cover = document.querySelector(".playg");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init(wrapper.querySelector(".video"));
}
const cover = document.querySelector(".playh");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init(wrapper.querySelector(".video"));
}
const cover = document.querySelector(".playi");
cover.addEventListener("click", coverClickHandler);
}());
There is a load of duplication there. Removing that duplication is the key to success.
I’ll take a look at supplying an example of that soon.
If I want to set, different PlayVars for each video.
There would be 9 of these altogether:
playerVars: {
If I wanted one video to have a different end and start time.
start: 36,
end: 45,
or, if I wanted a different video to use loop.
These are the only things where only 1 is needed of it.
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);
}
function onPlayerReady(event) {
const player = event.target;
player.setVolume(50); // percent
}
After that is figured out, what I would want to do next is, after one is clicked, if I click on another video, I would want the other one before it to stop.
That part is easy. You just loop through all of the players stopping them all, before starting the one that was chosen.
From this:
<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
To this:
‘Var’ becomes ‘Const,’ what would ‘for’ become?
Changing it to ‘let’ doesn’t work.
Does it stay as ‘for’, or would I change it to something else?
<script>
function init() {
const vidDefer = document.getElementsByTagName('iframe');
for (const i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
But then I saw how this:
for (n = 0; n < v.length; n++) {
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = thumb(v[n].dataset.id);
div.onclick = iframe;
v[n].appendChild(div);
}
});
Became this:
v.forEach(function (video) {
function init() {
v.forEach(function (video) {
const div = document.createElement("div");
div.setAttribute("data-id", video.dataset.id);
div.innerHTML = createThumbnail("AJDZEOX");
div.onclick = replaceThumbWithIframe;
video.appendChild(div);
});
}
init();
}());
That all depends on what the for statement is doing.
for (var i=0; i<vidDefer.length; i++) {
It’s looping over each item in the vidDefer function, so you can use the forEach method instead.
// for (var i=0; i<vidDefer.length; i++) {
vidDefer.forEach(function (vid) {
// if(vidDefer[i].getAttribute('data-src')) {
if(vid.getAttribute('data-src')) {
// vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
vid.setAttribute('src', vid.getAttribute('data-src'));
}
// }
});
Now the video isn’t showing:
Working version:
That’s because you’ve messed up some of the closing braces.
Additionally, instead of using data-src it’s preferred to use the dataset property instead.
vidDefer.forEach(function (vid) {
// if(vid.getAttribute('data-src')) {
if(vid.dataset.src) {
// vid.setAttribute("src", vid.getAttribute("data-src"));
vid.setAttribute("src", vid.dataset.src);
}
});
Still not showing:
<script>
function init() {
const vidDefer = document.getElementsByTagName('iframe');
vidDefer.forEach(function(vid) {
if (vid.dataset("src")) {
vid.setAttribute("src", vid.dataset("src"));
}
});
window.onload = init;
</script>
That’s because you still haven’t fixed the closing braces properly. Every opening brace must be paired with a matching closing brace.
Like this?
<script>
function init() {
const vidDefer = document.getElementsByTagName('iframe');
vidDefer.forEach(function(vid) {
if (vid.dataset("src")) {
vid.setAttribute("src", vid.dataset("src"));
}
}
});
window.onload = init;
</script>
That’s not it either.
No not like that. Here’s why.
function init() {
...
vidDefer.forEach(function(vid) {
...
}
});
Do you see the trouble yet?
How about now when more is removed?
function init() {
...
vidDefer.forEach(
...
});
Can you see where the trouble is now?