Fullscreen html5 video with iOS Safari web browser

Question

Is there a way to trigger fullscreen on iOS Safari (mobile web). Either fullscreen or full viewport would be great. Here is what I have tried below :

<video id="mobile_content"> 
  <source src="someurltocontent"></source>
</video>


function makefullscreen(element){
    if(element.requestFullscreen) {
        element.requestFullscreen();
    } 
    else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } 
    else if(element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } 
    else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
    else{
        var requestFullscreen = 
                document.documentElement.requestFullscreen ||
                document.documentElement.webkitRequestFullscreen ||
                document.documentElement.mozRequestFullscreen ||
                document.documentElement.requestFullScreen ||
                document.documentElement.webkitRequestFullScreen ||
                    document.documentElement.mozRequestFullScreen;

        if (requestFullscreen) {
           requestFullscreen.call(document.documentElement);
        } 
        else {
           console.log("really!? come on...");
        }
    }
}

On a user action the above function is passed a video element and if fullscreen is available then fullscreen is executed on the video element.

This does not work on Safari for IPAD.

---

One workaround would be to apply the controls attr to the video tag then let the user initiate fullscreen using the native player fullscreen.

<video id="mobile_content" controls> 
     <source src="someurltocontent"></source>
</video>

Any ideas other than the forementioned ?

Answer 1

You can easily trigger fullscreen on a Media DOM element (like video) on Safari for iPad by using the following code :

HTML

<div id="video-container">
    <video> 
        <source src="path/to/file.webm"></source>
        <source src="path/to/file.mp4"></source>
    </video>
</div>

JavaScript

var videoContainer = document.getElementById('video-container');
var video          = videoContainer.getElementsByTagName('video');

function toggleVideoFullscreen() {

    if (video.webkitEnterFullScreen) {
        // Toggle fullscreen in Safari for iPad
        video.webkitEnterFullScreen();
    } else {
        // Toggle fullscreen for other OS / Devices / Browsers 
    }
}

However, this method only works for Media DOM Elems in Safari for iPad and I'm always in trouble about request a fullscreen on another DOM Elem like a div, a section etc..

It seems like webkitRequestFullscreen always returns undefined on every single DOM Elems in Safari for iPad.

Have a nice day !

Answer 2

Hey for everyone interested I spent a couple of days researching the best way to deal with fullscreen videos taking into account cross browsing compatibility.

There are 3 approaches:

1- Like Netflix, instead of playing a video you redirect the user to the app store.

2- You can "emulate" full screen by using the "playsinline" property which it will avoid triggering the native controls in mobile IOS and with a width of 100% it looks like the video is fullscreen.

3- The third approach is like the accepted answer but including the way to detect that the fullscreen was triggered and managing the exit fullscreen.

Basically you would make a wrapper around the video, Im getting the reference by useRef() (react) and you will trigger the fullscreen api (when possible) in the wrapper.

But in the last case, the final else (where IOS Mobile is not supported) you will trigger another method.

Okay here is the code!!

const video = document.getElementsByTagName('video')[0];
const isInFullScreen =
    (document.fullscreenElement && document.fullscreenElement !== null) ||
    (document.webkitFullscreenElement && document.webkitFullscreenElement !== null) ||
    (document.mozFullScreenElement && document.mozFullScreenElement !== null) ||
    (document.msFullscreenElement && document.msFullscreenElement !== null);
  if (!isInFullScreen) {
    if (playerWrapper.current.requestFullScreen) {
      // W3C API
      playerWrapper.current.requestFullScreen();
    } else if (playerWrapper.current.mozRequestFullScreen) {
      // Mozilla current API
      playerWrapper.current.mozRequestFullScreen();
    } else if (playerWrapper.current.webkitRequestFullScreen) {
      // Webkit current API
      playerWrapper.current.webkitRequestFullScreen();
    } else if (video.webkitEnterFullScreen) {
      // This is the IOS Mobile edge case
      video.webkitEnterFullScreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }