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

JavaScript
62

Clicking on the player while it’s playing.

After you click once, click again, and again, and again.

63

I don’t seem to be able to reproduce the effects that you describe.

64

How would you disable allowfullscreen via the javascript?

Removing it from the iframe did the trick:

<iframe allowfullscreen></iframe>

65

It not allowing fullscreen is the default, so just remove it and that should do it for you.

66

It doesn’t work with this one because it’s preprogrammed in the code.

<div class="js-player"></div>

It would need to be done manually from within the javascript.

67

You should be able to do that from within the onPlayerReady function. The youtubePlayer variable refers to the iframe containing the video.

68

What would the code be?

I tried looking for it.

I’m not seeing it.

69

Well here’s what the iframe looks like:

<iframe class="js-player video-frame" frameborder="0" allowfullscreen="1"
  allow="autoplay; encrypted-media" title="YouTube video player" width="560" height="315" 
  src="..." id="widget2"></iframe>

What do you think needs to be done to set the allowfullscreen attribute to something else?

70

allowfullscreen="0"

71

youtubePlayer.allowfullscreen(0)

This didn’t work.


 allowfullscreen:1,
 allowfullscreen:0,
72

The setAttribute command is what you need to use.

73

Element.requestFullscreen()

74

iframe.setAttribute(‘allowFullScreen’, ‘’)

iframe.setAttribute(‘allowfullscreen’,‘1’);

75

This would need to be put into a function, right?

youtubePlayer.setAttribute("allowfullscreen","0");

76

I can’t believe I’m having issues with these after they were fine yesterday.

[This one uses id, sound is playing, it should be mute]

https://testingyoutube6546.blogspot.com/

(function iife() {
  "use strict";

  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
  }
  window.onYouTubePlayerAPIReady = function() {
    new YT.Player("player", {
      events: {
        "onReady": onPlayerReady
      }
    });
  };
}());

[Difference checker is telling me both ‘class’ javascripts are identical:]

How can this be? This makes no sense at all???

What is going on?

What seems to be the discrepancy?

I think something needs to be adjusted in the codes that seem to be broken.

The one that works without an issue seems to be an anomaly that can’t be explained.

[This one uses class, sound is playing, it should be mute]
https://jsfiddle.net/8aebp5zt/65/

(function iife() {
  "use strict";

    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
    }
    window.onYouTubePlayerAPIReady = function () {
        new YT.Player(document.querySelector(".js-player"), {
            events: {
                "onReady": onPlayerReady
            }
        });
    };

}());

[This one uses class: it’s on mute as it should be]
https://jsfiddle.net/c3t4d2h7/1/

(function iife() {
  "use strict";

    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
    }
    window.onYouTubePlayerAPIReady = function () {
        new YT.Player(document.querySelector(".js-player"), {
            events: {
                "onReady": onPlayerReady
            }
        });
    };

}());
77

The one that works properly uses: Load Type: On Load

All the others players I listed on here don’t.

[ This one uses class : it’s on mute as it should be ]


How would I get the others to work on Blogger outside of jsfiddle and codepen?

[ This one uses id , sound is playing, it should be mute ]

https://testingyoutube6546.blogspot.com/

[ This one uses class , sound is playing, it should be mute ]
https://jsfiddle.net/8aebp5zt/65/

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

Would I need to reconfigure these to work with this type of player which is different from the cover version?

or would I be adding something entirely different to it?

This was meant to work with the cover player, not the standalone one with no added customization’s added to it.

or maybe it’s the youtube javascript I would be adjusting, I’m not sure now.

I’m just trying to get it to work outside of jsfiddle, but not sure what would need to be adjusted.

    const show = (el) => el.classList.remove("hide");
    const hide = (el) => el.classList.add("hide");
    const enableAutoplay = (el) => el.src.replace("autoplay=0", "autoplay=1");
    const autoplay = (el) => el.setAttribute("src", enableAutoplay(el));

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        const thevid = cover.parentNode.querySelector("iframe");
        hide(cover);
        show(thevid);
        autoplay(thevid);
    }
    const cover = document.querySelector(".wrapg .cover");
    cover.addEventListener("click", coverClickHandler);
78

When you have hundreds of experiments all with hundreds of different things wrong with them, it’s no wonder that you’re getting confused.

Focus on one single thing and work on getting that one thing working instead. That way you won’t face death by a thousand cuts.

4 Likes
79

We did the cover player fine, then I transferred that code to the one without the cover, we got it working, but little did I know it was only working because it was using Load type: On load.

Without that stated inside the jsfiddle, the audio feature doesn’t work where the volume can be set.

80

Both players are set to mute 0.

div tag no cover: audio feature works

iframe no cover: audio feature doesn’t work

I’m trying to get the iframe no cover version to work.
The audio feature isn’t working on that one.

81

Update I know what the issue is, blogger is

Changing this:
<iframe > </iframe>

to this:

<iframe />

It’s removing the end tag

</iframe>

        <iframe class="js-player video-frame" allow='autoplay; encrypted-media' frameborder='0' height='315' src='https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0&amp;showinfo=1&amp;controls=1&amp;autoplay=0&amp;iv_load_policy=3&amp;cc_load_policy=0&amp;fs=0&amp;disablekb=1&amp;enablejsapi=1' width='560' />