Iframe fullscreen internet explorer

Question

Really struggling trying to make my video player be able to handle Fullscreen within internet explorer.

I am using the following code from here

    (function() {
    var
        fullScreenApi = {
            supportsFullScreen: false,
            isFullScreen: function() { return false; },
            requestFullScreen: function() {},
            cancelFullScreen: function() {},
            fullScreenEventName: '',
            prefix: ''
        },
        browserPrefixes = 'webkit moz o ms khtml'.split(' ');

    // check for native support
    if (typeof document.cancelFullScreen != 'undefined') {
        fullScreenApi.supportsFullScreen = true;
    } else {
        // check for fullscreen support by vendor prefix
        for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
            fullScreenApi.prefix = browserPrefixes[i];

            if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
                fullScreenApi.supportsFullScreen = true;

                break;
            }
        }
    }

    // update methods to do something useful
    if (fullScreenApi.supportsFullScreen) {
        fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';

        fullScreenApi.isFullScreen = function() {
            switch (this.prefix) {
                case '':
                    return document.fullScreen;
                case 'webkit':
                    return document.webkitIsFullScreen;
                default:
                    return document[this.prefix + 'FullScreen'];
            }
        }
        fullScreenApi.requestFullScreen = function(el) {
            return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
        }
        fullScreenApi.cancelFullScreen = function(el) {
            return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
        }
    }

    // jQuery plugin
    if (typeof jQuery != 'undefined') {
        jQuery.fn.requestFullScreen = function() {

            return this.each(function() {
                if (fullScreenApi.supportsFullScreen) {
                    fullScreenApi.requestFullScreen(this);
                }
            });
        };
    }

    // export api
    window.fullScreenApi = fullScreenApi;
})();

taken from here http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ if i run the code in my version of ie with the simple demo here

http://johndyer.name/lab/fullscreenapi/

I get this response SORRY: Your browser does not support FullScreen

Which is fine but what i do not understand is when i run the video demo on http://mediaelementjs.com/ in internet explorer it will go Fullscreen fine.

Question is how on earth are they doing this??? it also works for Youtube etc.

I would really like to get my video player working Fullscreen working in internet explorer can anybody point me in the right direction how are people getting around this if the above code says it doesn't support it???

Thanks

Answer 1

Looking at the code from John Dyer lab he is testing for the cancelFullScreen method with or without vendor prefix to determine native fullscreen support. This is outdated as of today for some browser (it was never valid for IE) - W3C went with exitFullscreen and so most vendor prefix (probably John Dyer did not have time to update this page while he did it for its main mediaelementjs project - have a look at the source code from mediaelementjs).

You would need to look at this article for a full up to date solution.

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
  !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
  document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
  document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
  document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
  document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
  document.exitFullscreen();
    } else if (document.msExitFullscreen) {
  document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
    }
 }
}

See above for the methods to test to check support.

For the specific of IE see here. Native HTML5 media element fullscreen support is only available from IE 11 (you can test for the msExitFullscreen method to check support). For IE 9 and 10 (and for other browsers with no native fullscreen support) you can extend the size of your player to the full width and height of your viewport as a fallback.