This:
Cannot read property ‘playVideo’ of null"
Which might be why the video is not showing when it opens.
I was going to ask this: then noticed the “script error”
"How come when I click on the play image, no video is showing?
All I did was place the split play image on it."
https://jsfiddle.net/m5ejg0bx/
Compared to the same one, not using a split play image.
https://jsfiddle.net/ekm234s7/
Can you see where I went wrong.
I don’t understand why the video is not showing when it opens.
Same problem as before in that you now have two jackets not one.
Maybe change the first rule to split-wrap instead of jacketa.
const cover = document.querySelector(".split-wrap");
(function manageCurtain() {
You will still need the rules from teh other thread to be able to click the player.
That looks to be happening at the following place in the code:
function play() {
player.playVideo();
}
The reason why it’s happening there is that player is null.
Let’s trace things back to find out why that occurs.
The videoPlayer function has a player object that’s set to be null.
const videoPlayer = (function makeVideoPlayer() {
"use strict";
let player = null;
That should be updated when we add a player, but that’s not happening.
What happens in the addPlayer function?
function addPlayer(video) {
const playlist = "M7lc1UVf-VE";
new YT.Player(video, {
...
And there we find the cause of the problem. The player is not being assigned to that player variable.
player = new YT.Player(video, {
That fixes that problem, and a new issue then appears. But the script error is now all solved.
How is the new error fixed?
Well here’s the line:
player = new YT.Player(video, {
and youtube is complaining Uncaught Error: YouTube player element ID required.
so let’s take a look at the video variable.
console.log(video);
player = new YT.Player(video, {
and we’re shown that video is null.
Why is video null? Here is where the addPlayer function is invoked:
function onYouTubeIframeAPIReady() {
const wrapper = cover.parentElement ;
const frameContainer = wrapper.querySelector(".video");
videoPlayer.addPlayer(frameContainer);
}
That frameContainer is null. It can only be null when the .video class isn’t found.
Let’s find out why by logging relevant variables:
console.log({cover, wrapper, frameContainer});
videoPlayer.addPlayer(frameContainer);
We are given the following information:
{
cover: div.jacketa,
wrapper: div.j1,
frameContainer: null
}
Does that make sense for you?
Does that mean, the other code, should be changed also?
https://jsfiddle.net/ekm234s7/
To
player = new YT.Player(video, {
Which was:
new YT.Player(video, {
It doesn’t seem to do any harm to make the player more easily available, so go ahead.
The video is still not showing, so what else has to be done?
Well the cover is undefined, so let’s get the cover.
function onYouTubeIframeAPIReady() {
const cover = document.querySelectorAll('.jacketa');
const wrapper = cover.parentElement;
I’ll let you try and troubleshoot things further from there.
Doesn’t this need to be added to it?
videoPlayer.addPlayer(frameContainer);
Which then gets sent to
This?
(function iife() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.parentElement;
show(wrapper);
videoPlayer.play();
}
cover.addEventListener("click", coverClickHandler);
}());
Area around the youtube play button is not clickable
https://jsfiddle.net/u51roefq/4/
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.parentElement;
show(wrapper);
videoPlayer.play();
}
Area around the youtube play button is clickable
Works as it is supposed to except for the error message appearing.
Also, it’s broken again once “anything” is removed.
Cannot read property ‘classList’ of undefined"
https://jsfiddle.net/5drbLq9j/
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.anything;
show(wrapper);
videoPlayer.play();
}
Also, I don’t have it set like this.
I wasn’t able to figure this way out.
function onYouTubeIframeAPIReady() {
const cover = document.querySelectorAll('.jacketa');
const wrapper = cover.parentElement;
I have this:
function onYouTubeIframeAPIReady() {
const wrapper = cover.parentElement ;
const frameContainer = wrapper.querySelector(".video");
videoPlayer.addPlayer(frameContainer);
}
Maybe I am doing it the wrong way, and your way would work better, but I wasn’t able to figure it out.
My way involves using tests, which helps to ensure that the code works on all things that we care about. Fortunately, having a large number of page examples and situations also count as tests.
I recommend that you supply a large number of links to pages that you want to work using the same code, so that I can work on how to configure the code, so that the same set of code works on all of the pages.
Both codes work here.
Can I change this:
https://jsfiddle.net/oLpqh5t7/
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.parentElement;
show(wrapper);
videoPlayer.play();
}
To this: ?
https://jsfiddle.net/qmg03785/
function coverClickHandler(evt) {
const wrapper = evt.currentTarget;
show(wrapper);
videoPlayer.play();
}
That seems to work.
Because jsfiddle has auto play turned off, I have to test video codes in. JSitor
https://jsitor.com/
I keep forgetting.
Either that or on github.
When I modify code in jsfiddle I see the display area update almost immediately. So autoplay seems to be all working there.
Do you mean something else?
YouTube video being able to start on its own. that’s not allowed in jsfiddle. On first load. After you click on the cover, none of them start on their own.
That’s not my experience. I click on the cover in https://jsfiddle.net/qmg03785/ and the video start playing just fine.
I click on the cover and it’s off.
https://jsfiddle.net/eqjkw951/
I click on the cover and it’s the video starts playing right away.
https://jsitor.com/1UekRWAa-
Then you are having a very different experience from me. The video automatically plays after clicking on the cover for both of them with me.