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 ?

score 7 · Answer 1 · answered Aug 22 '16 at 15:26

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 !

Fullscreen html5 video with iOS Safari web browser

1 Answers1