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

JavaScript
42

Your code does nothing with it, so yes it is useless.

1 Like
43

You removed this:
player =

From here:
new YT.Player(document.querySelector

That part was useless too?

44

That’s right, for nothing is being done with player.

1 Like
45

Which way is better?

1.)

    window.onYouTubePlayerAPIReady = function () {
        new YT.Player("player", {

2.)

   window.onYouTubePlayerAPIReady = function () {
    window.player = new window.YT.Player ("player", {

I was reading this:
https://chromatichq.com/blog/working-youtube-player-api-iframe-embeds

46

You’re doing nothing with player, so assigning it as a global variable is only making things worse.

That is not a challenge for you to find something to do with it either. :slight_smile:

1 Like
47

ok, it was just something I stumbled on.

48

Is it better to keep this stuff in the iframe, or the javascript?

       videoId: 'M7lc1UVf-VE',
      playerVars: {
        autoplay: 0,
        loop: 0,
        controls: 1,
        showinfo: 0,
        autohide: 0,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
      },
49

JavaScript is a better place for that, especially when it comes to updating the information, such as with the autoplay.

Only the information that varies from the default settings should be shown.

50

Meaning what? As an example.

I also have a question:

Which is better to use?
Is one way more efficient than the other?

  playerVars: {
        autoplay: 1,

vs.

youtubePlayer.playVideo();


function onPlayerReady(event) {
    const youtubePlayer = event.target;
    youtubePlayer.setVolume(0); 
    youtubePlayer.playVideo();
  }
51

Well, when the text color is black, you shouldn’t use a style that sets the text color to black until you need to. There are thousands of default settings and listing all of the defaults in your code, distracts from the information that is more important.

Efficiency of human brain power is the much more vital consideration, than nanoseconds of computer power.

The second example with playVideo() is the preferable one, as it more clearly expresses the intention of what you want to achieve.

2 Likes
52

Believe it or not, there’s a big difference.

This one starts rapidly.

  playerVars: {
        autoplay: 1,

vs.

This one stops then goes.

youtubePlayer.playVideo();

53

Try taking the scripts off the “onload” load type (which is bloody slow), and to the nowrap bottom of body, one instead.

By the way, what are you measuring between them?

54

What do you mean?

55

Where the JavaScript section says “JavaScript + No Library” - click that.

56

I just threw both code in here:
http://htmledit.squarefree.com/

Hit enter a bunch of times.

I don’t think I should be able to see the play button if it’s on auto start.

youtubePlayer.playVideo();
https://jsfiddle.net/gc4x1ar0/3/

892×353 220 KB

57

If the play button is viewable or not.

The first thing you see should be this:

  playerVars: {
        autoplay: 1,
58

This is something I just noticed recently.

When you double, triple click it goes into fullscreen mode.

This one: div tag

This one: iframe

And this one: div tag
https://jsfiddle.net/8aebp5zt/53/

https://i.imgur.com/QKNKICd.png

Doesn’t happen with this one: iframe
https://jsfiddle.net/8aebp5zt/55/

or even this: iframe
<iframe width="518" height="291" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

How come, and is there a specific way that can be controlled?

59

I think that it has something to do with the iframe not being in allow-presentation mode. I give up bashing my head against that one.

If autoplay works, then that’s the one to go for.

60

That’s ok. See if you can figure out #58

I don’t understand why certain ones allow full screen, and then others don’t, and how that can be controlled.

61

WTF’s a double triple click?!?!?