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


#82

I know I have mentioned this in the distant past. But I still think you would have better going if you developed on your own computer instead of blogger / jsfiddle.

That way once you got things worked up so you knew the code was good you could put it up on blogger and deal with blogger specific problems.

The way you are going about it now is two learning curves at the same time and it isn’t easy to know if a problem is because of the code or something blogger / jsfiddle is doing.


#83

blogger is the last thing I test things on.


#84

Out of curiosity

This one doesn’t work:
<iframe />
https://jsfiddle.net/8aebp5zt/72/

But it works on here
<iframe />
https://testingyoutube6546.blogspot.com/

How come?

Blogger is removing the end tag automatically, so I put it in the same way in jsfiddle.


#85

iframe player 'working’
<iframe/>
https://nocoverplayer.blogspot.com/

iframe player 'not working’
<iframe/>
https://jsfiddle.net/8aebp5zt/64/

iframe player 'working’
Load Type: On Load
<iframe/>
https://jsfiddle.net/8aebp5zt/74/

iframe player 'working’
<iframe/> </iframe>
https://jsfiddle.net/8aebp5zt/73/


#86

As I’m realizing, an <iframe/> end tag isn’t required for it to work.

By itself without anything hooked up to it, it works inside of jsfiddle
https://jsfiddle.net/vutb0ajh/

Once you hook javascript up to it it stops:
and requires you to use load type: onload.
Unless you remember to add in the iframe end tag yourself, then you don’t need to use load type.
https://jsfiddle.net/8aebp5zt/64/


#87

@Paul_Wilkins
Is there a proper way for the javascript to work with a missing iframe end tag?

iframe player 'not working’
missing iframe end tag. <iframe/>
https://jsfiddle.net/8aebp5zt/64/

This code is on blogger, and the audio feature is working without a problem using a missing iframe end tag.
https://nocoverplayer.blogspot.com/

I don’t understand why it’s working inside blogger, when it shouldn’t be able to. The audio set to mute 0 shouldn’t be working at all, but it is.


#88

What does this tell you? @Paul_Wilkins

Why would the blogger style editor omit the end tag iframe?

And how does it magically appear back when viewing the page source?

But when viewing it via the page source, it’s right there?
https://nocoverplayer.blogspot.com/

View Page Source:

Blogger: CSS / html, javascript input editor


#89

I was glad I was able to figure that out. And with that, all my players are working as they should now.


#90

This is the disable double click full screen code.
https://jsfiddle.net/4zg5ofdp/12/

I’m trying to implement it here:
https://jsfiddle.net/8aebp5zt/76/

                videoPlayer.allowFullscreen = false;
                videoPlayer.addEventListener("fullscreenchange", fullScreeCallback, false);
                videoPlayer.addEventListener("webkitfullscreenchange", fullScreeCallback, false);
                videoPlayer.addEventListener("msfullscreenchange", fullScreeCallback, false);
                videoPlayer.addEventListener("mozfullscreenchange", fullScreeCallback, false);
            }
    
            document.getElementById('fullScreenPlayer').addEventListener("click", function(e) {
                goFullscreen();
            }, false);

https://caniuse.com/#feat=fullscreen



#91

Working Version:
https://jsfiddle.net/4zg5ofdp/13/

This is what I have:
https://jsfiddle.net/8aebp5zt/79/


(function iife() {
  "use strict";
  var youtubePlayer;

  var tag = document.createElement("script");
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  function onPlayerReady(event) {
    const youtubePlayer = event.target;
    youtubePlayer.setVolume(0); // percent
    youtubePlayer.allowFullscreen = false;
    youtubePlayer.addEventListener("fullscreenchange", fullScreeCallback, false);
    youtubePlayer.addEventListener("webkitfullscreenchange", fullScreeCallback, false);
    youtubePlayer.addEventListener("msfullscreenchange", fullScreeCallback, false);
    youtubePlayer.addEventListener("mozfullscreenchange", fullScreeCallback, false);
  }




  window.onYouTubePlayerAPIReady = function() {
    new YT.Player("player", {
      height: '315',
      width: '560',
      host: 'https://www.youtube-nocookie.com',
      videoId: 'M7lc1UVf-VE',
      playerVars: {
        autoplay: 0,
        controls: 1,
        showinfo: 1,
        rel: 0,
        iv_load_policy: 3,
        cc_load_policy: 0,
        fs: 0,
        disablekb: 1,
      },
      events: {
        "onReady": onPlayerReady
      }
    });
  };

  document.querySelector('fullScreenPlayer').addEventListener("click", function(e) {
    goFullscreen();
  }, false);

}());

#92

Like This???
Do I have this right?
Looking at what I did.
The code is working, I just want to know if I put it in right.
https://jsfiddle.net/8aebp5zt/83/

(function iife() {
    "use strict";
    var videoPlayer;
    var tag = document.createElement("script");
    tag.src = "https://www.youtube.com/player_api";
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function onPlayerReady(event) {
        const youtubePlayer = event.target;
        youtubePlayer.setVolume(0); // percent
        videoPlayer = document.getElementById("player"); 
        videoPlayer.allowFullscreen = false;
        videoPlayer.addEventListener("fullscreenchange", fullScreeCallback, false);
        videoPlayer.addEventListener("webkitfullscreenchange", fullScreeCallback, false);
        videoPlayer.addEventListener("msfullscreenchange", fullScreeCallback, false);
        videoPlayer.addEventListener("mozfullscreenchange", fullScreeCallback, false);
    }
    window.onYouTubePlayerAPIReady = function() {
        new YT.Player("player", {
            height: "315",
            width: "560",
            host: "https://www.youtube-nocookie.com",
            videoId: "M7lc1UVf-VE",
            playerVars: {
                autoplay: 0,
                controls: 1,
                showinfo: 1,
                rel: 0,
                iv_load_policy: 3,
                cc_load_policy: 0,
                fs: 0,
                disablekb: 1
            },
            events: {
                "onReady": onPlayerReady
            }
        });
    };
    document.querySelector("fullScreenPlayer").addEventListener("click", function(e) {
        goFullscreen();
    }, false);
}());


#93

Can I ignore “Line is longer than 80 characters”? @Paul_wilkins

Also, is this a new thing because I never got that before.


#94

No, that shouldn’t be ignored. Your code is too difficult for people to easily understand when it’s longer than 80 characters.

JSLint is always in development and improving. It has several updates that occur to it each month.


#95

These are all over 80, and I don’t ever recall seeing this error ever before.
https://jsfiddle.net/8aebp5zt/85/


#96

Solution: Put that repeated string in a variable.

var buttonSelectors = ".play, .pause, .initial, .speaker";
...
button.querySelectorAll(buttonSelectors).forEach(hide);

#97

What do you think of what this person said?

We make it 140. 80 might have been good in the days of smaller screens and smaller printers


#98

Or, another solution: use a shared classname to designate those buttons.

<div class="initial js-button">
...
<div class="play js-button">
...
<div class="pause js-button">
...
<div class="speaker js-button">

Then just use that js-speaker selector instead.

button.querySelectorAll(".js-button").forEach(hide);

#99

How many characters is this?
button.querySelectorAll(".play, .pause, initial, .speaker").forEach(hide);


#100

The spacing at the front is important to keep there too. Don’t let standard slip just because you want to get lazy.


#101

This works:
button.querySelectorAll(".pla, .pau, .init, .spe").forEach(hide);

69 characters including spaces…

65 + 4 = 69

compared to

74 + 4 = 78

9 characters less.

414

compared to

468

54 less characters.

Actually, it was more like 83

498

84 less characters then.