deawx / full-screen-helper.js Goto Github PK

Tested in:

• IE8+ (using ActiveX)
• IE11 (without ActiveX)
• Firefox
• Google Chrome

Note ¹: for security reasons maybe WScript.shell (ActiveX) may be blocked. Note ²: Mobile browsers using fallback (full-viewport)

For use an video in fullscreen:

<video id="myVideo" src="video.webm"></video>

<button onclick="$('#myVideo').fullScreenHelper('request');">Fullscreen</button>

Entire page in fullscreen:

<button onclick="FullScreenHelper.request();">Fullscreen</button>

<button onclick="$('body').fullScreenHelper('request');">Fullscreen</button>

Note ¹: 'request' is optional in $('...').fullScreenHelper('request'), you can use $('...').fullScreenHelper() Note ²: You can use $('body') or $(document) in .fullScreenHelper('toggle') and .fullScreenHelper('request')

For support in older MSIE browser is needed WScript.Shell activex, but in IE8+ security has been increased, which can cause the script to not work.

For MSIE11 is used msRequestFullscreen and msExitFullscreen

Note: It is recommended that you use:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Use combined CSS selectors with prefix don't work, because when there is an invalid selector the whole rule dropped, if grouped (details: https://www.w3.org/TR/selectors4/#logical-combination):

:fullscreen,
:full-screen,
:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen {
    /* your custom css */
}

When the selectors are not grouped, only invalids (depends on the browser) rules are dropped, example:

/* dropped in older browsers */
:fullscreen {
    /* your custom css */
}

/* dropped in new browsers */
:full-screen {
    /* your custom css */
}

/* dropped in all browsers except Safari, Chrome and others with webkit */
:-webkit-full-screen {
    /* your custom css */
}

/* dropped in all browsers except Mozilla Firefox */
:-moz-full-screen {
    /* your custom css */
}

/* dropped in all browsers except Internet Explorer 11 */
:-ms-fullscreen {
    /* your custom css */
}

However having a rule for each thing can make the code much more difficult to maintain, so you can use the selector:

.full-screen-helper {
    /* your custom css */
}

The script has not been tested on older browsers such as IE7, but is likely to work depending on ActiveX support, however box-sizing may not work or you may be using a modern browser and you have changed the control of box-sizing to something like:

.my-element {
    box-sizing: content-box !important;
    padding: 10px !important;
    border: 1px #ccc solid !important;
}

In both cases you can suffer side effects maybe use padding or border.