Disabling double click fullscreen via YouTube API

I cannot figure out how to disable double click fullscreen through the javascript.

Nothing I’m trying is working. I’ve been searching all over and can’t seem to find an answer anywhere.

Fullscreen Api
https://fullscreen.spec.whatwg.org/

More specifically, I was able to disable it in Firefox, but not Chrome.

To prevent double click fullscreen from the iframe all you do is remove allowfullscreen from the iframe code.

<iframe width="606" height="344" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" /*allowfullscreen*/></iframe>

But how would it be done through the youtube javascript api if you’re not using the iframe?

I can’t seem to figure it out

This works in Firefox, but not Chrome.

    videoPlayer = document.querySelector(".js-player");
    videoPlayer.allowFullscreen = false;

This was with the above code also, but it works without it too, but only in Firefox.
It has no effect on Chrome.

      videoPlayer.addEventListener("fullscreenchange", fullScreeCallback, false);
      videoPlayer.addEventListener("webkitfullscreenchange", fullScreeCallback, false);
      videoPlayer.addEventListener("msfullscreenchange", fullScreeCallback, false);
      videoPlayer.addEventListener("mozfullscreenchange", fullScreeCallback, false);

The Code I’m using:
https://jsfiddle.net/zb6mkug3/352/


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

(function iife() {
  "use strict";

  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/player_api";
  const 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"), {
      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
      }
    });
  };

}());

https://davidwalsh.name/fullscreen
https://stackoverflow.com/questions/44743559/html5-prevent-fullscreen-mode
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowfullscreen
https://www.sitepoint.com/use-html5-full-screen-api/
https://codepen.io/matt-west/pen/hmqsF

I believe that it’s not able to be done, for reasons of security.

1 Like

How is plnkr able to disable double click fullscreen in both firefox and Chrome?

How are they able to do it?

Is there a way to determine that?

I have no idea what I should be looking for in Inspect Element.

Update*

Nevermind, the only reason why fullscreen was disabled in this example was because the javascript was inside <script></script> tags.

But that doesn’t make sense because it’s inside script tags here also and fullscreen is still enabled.

Maybe you’re right.

1 Like

1 Like

Hi there asasass,

although you P.M’d me about this issue of
yours, I thought it better to answer it here.

I thought that you were aware of my views
on tampering with the “User Experience”.

The choice to activate “fullscreen” must
always be personal and definitely not
under the control of the coder. :unhappy:

You really should try to address these
undesirable “control freak” tendencies. :winky:

coothead

4 Likes

I should have messaged you earlier to tell you that this was no-longer something I thought possible to do.

I would really have preferred…

… this is no-longer something that I will ever desire to do :biggrin:

coothead

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.