Converting the inline javascript to pure javascript, how would this be done?

JavaScript
143

lines change colors
added : onPlayerStateChange:

lines don’t change colors.
removed : onPlayerStateChange

144

Those both use the youtube library (onYouTubePlayerAPIReady). Do you have an example that doesn’t use the youtube library?

145

Here:

146

What I’m getting at, is why don’t you want to use the working onPlayerStateChange?

Is it because that only works when using the youtube API library, and you want to use some other technique without the youtube API library?

1 Like
147

But I would want to use it with this configuration:

 <div class="video " data-id="M7lc1UVf-VE"></div>

This is just the iframe:

Here:

148

Okay - it seems that when adding a click event to the iframe, that does not get triggered when you play the video.

149

Before going that far, you first need to have it work with the iframe example which doesn’t seem to be possible at this stage.

150

Even when using the recommended technique of attaching the event to the iframe body, it doesn’t seem to work when it’s a youtube video.

// this is not successful
const iframe = document.querySelector("iframe");
const iframeBody = iframe.contentWindow.document.body;
iframeBody.addEventListener("click", function () {
  console.log('iframe click event');
});
151

Is it just not possible to do then?

152

See if it’s successful on here:

This is just a regular iframe scrollbar.
Which I tried testing it on trying to get it to work.
Because youtube uses iframe also.

153

I’m trying out other ideas.

1 Like
154

Yes, that works when the iframe is in your own domain, but rules change when the iframe is in a different domain, such as youtube.

155

I don’t think that we can successfully spy on what happens inside of someone elses iframed website.

156

Would it work on another video type site?

<iframe src="https://player.vimeo.com/video/136345350" width="600" height="338" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

157

I don’t think it can work when the domain (vimeo.com in this case) is different from your own domain.

158

So then, youtube forces you to use their own api, or you can’t use anything at all?

159

That’s about the size of it.

160

What’s the difference between:
autoplay: 1,

And this?
player.playVideo();

161

The behaviour is the same, where when we click the cover play button, the video then plays as soon as it’s loaded. That is normal expected behaviour.

For someone to click the play button expecting it to play, only to find that after waiting a while that it doesn’t play and they have to click a different bloody play button to get it to play - that becomes annoying extremely rapidly.

162

When it’s set like this:

  function colorClickHandler() {
    changeColor();
    player.playVideo();
  }


  player.playVideo();

Is only activated when the user taps the border or the lines.
It’s just a different functionality.

Which you say is annoying.