webkitRequestFullScreen not working?

Question

I have this JSFiddle sample for webkitRequestFullScreen.

I'm using Chrome 2 on Mac OSX and the example does not appear to work for me. Initially I wrote my own example but the one in the link below is not written by me. Still it doesn't appear to work.

http://jsfiddle.net/2uNzk/1/

var test = document.querySelector('.test');

test.addEventListener('click', function () {

  if(test.requestFullScreen) {
    test.requestFullScreen();
  } else if(test.mozRequestFullScreen) {
    test.mozRequestFullScreen();
  } else if(test.webkitRequestFullScreen) {
    test.webkitRequestFullScreen();
  }
}, false);

however the following example does work! Only when I try to reproduce it in Plunker or JSFiddle it doesn't appear to work:

http://www.jwplayer.com/blog/using-the-browsers-new-html5-fullscreen-capabilities/

heres my plunker example:

 <!-- just to keep things in one place I put the JS here. -->
  <script type="text/javascript">
    function goFullscreen(id) {

      // Get the element that we want to take into fullscreen mode
      var element = document.getElementById(id);

      // These function will not exist in the browsers that don't support fullscreen mode yet, 
      // so we'll have to check to see if they're available before calling them.

      if (element.mozRequestFullScreen) {
        // This is how to go into fullscren mode in Firefox
        // Note the "moz" prefix, which is short for Mozilla.
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullScreen) {

        // This is how to go into fullscreen mode in Chrome and Safari
        // Both of those browsers are based on the Webkit project, hence the same prefix.
        element.webkitRequestFullScreen();

      }
      // Hooray, now we're in fullscreen mode!
    }
  </script>



  <div class="example">
    <img class="video_player" src="http://assets3.parliament.uk/iv/main-large//ImageVault/Images/id_7382/scope_0/ImageVaultHandler.aspx.jpg" id="player2">
    <button onclick="goFullscreen('player2'); return false">Click Me To Go Fullscreen! (For real)</button>
  </div>

http://plnkr.co/edit/BOhqNTEACTPmr9ebVnHs?p=preview

Any ideas? I'm baffled!

It does work, just not in the browser editors, since they use iframes. If you open http://fiddle.jshell.net/2uNzk/1/show/ (your fiddle) it will work. — orhanhenrik, Feb 12 '15 at 10:07
Izzey... thank you! Well I i recently downloaded chrome on my mac. The icon says chrome 2. — K-Dawg, Feb 12 '15 at 12:49
I think it was my mac applications menu labeling it as Chrome2 :/ — K-Dawg, Oct 25 '16 at 10:31

score 14 · Accepted Answer · answered Feb 12 '15 at 13:36

14

The webkit version does not capitalize the s of Fullscreen.

answered Feb 12 '15 at 13:36

Please elaborate. What do you mean? – K-Dawg Feb 12 '15 at 16:21
2

I mean, it's `webkitRequestFullscreen`, not `webkitRequestFullScreen`. Look closely at the case of the `s` in `screen`. – Feb 12 '15 at 16:24
1

Oops... yes! Haha sorry I didn't spot that! – K-Dawg Feb 12 '15 at 16:31
This was the problem for me – K-Dawg Feb 06 '23 at 10:30
1

Does not make a difference on iPhones, capitalized or not iPhones don't have the API. – Mahn May 18 '23 at 16:49

score 10 · Answer 2 · answered Dec 31 '20 at 03:19

10

For anyone else looking, I found this thread that says it doesn't work on iPhones if you're calling it for an element (div, etc): https://developer.apple.com/forums/thread/133248

answered Dec 31 '20 at 03:19

Paul D

101
1
2

Thanks for expanding on the answer, that's super useful to know. – K-Dawg Apr 23 '21 at 07:28

score 3 · Answer 3 · answered Aug 24 '22 at 19:04

3

Okay I finally found the easy answer. For iOS what will work is webkitEnterFullscreen().

const docEl = document.getElementById('player') as any; // Remove as any if not using typescript
if (!docEl) return;
if (docEl.requestFullscreen) docEl.requestFullscreen();
else if (docEl.webkitRequestFullscreen) docEl.webkitRequestFullscreen();
else if (docEl.mozRequestFullScreen) docEl.mozRequestFullScreen(); // Careful to the capital S
else if (docEl.msRequestFullscreen) docEl.msRequestFullscreen();
else if (docEl.webkitEnterFullscreen) docEl.webkitEnterFullscreen(); // Magic is here for iOS

answered Aug 24 '22 at 19:04

Keytrap

421
5
14

Only on iPad. Does not work on iPhones. – Mahn May 18 '23 at 16:48
I don't even have an iPad, and it worked fine on my iPhone.. – Keytrap May 22 '23 at 11:59

score 0 · Answer 4 · answered Feb 05 '23 at 08:08

Here is how I successfully did the enter and exit fullscreen. Tested with Chrome, Safari, Firefox and Opera browsers.

if (document.fullscreenElement) {
  document.exitFullscreen();
} else if (document.webkitFullscreenElement) {
  document.webkitExitFullscreen();
} else if (document.mozFullScreenElement) {
  document.mozCancelFullScreen();
} else if (document.msFullscreenElement) {
  document.msExitFullscreen();
} else {
  var puzzleFull = document.getElementById('puzzle-full');
  if (puzzleFull.requestFullscreen) {
    puzzleFull.requestFullscreen();
  } else if (puzzleFull.webkitRequestFullscreen) {
    puzzleFull.webkitRequestFullscreen();
  } else if (puzzleFull.mozRequestFullScreen) {
    puzzleFull.mozRequestFullScreen();
  } else if (puzzleFull.msRequestFullscreen) {
    puzzleFull.msRequestFullscreen();
  }
}

P.S. - I'm using a toggle button to enter/exit fullscreen of the puzzle.

webkitRequestFullScreen not working?

4 Answers4

Linked

Related