full-screen-helper v1.0.6
Full Screen Helper
Setup
Include lib
<script src="full-screen-helper.min.js"></script>
Or use CDN:
<script src="https://cdn.jsdelivr.net/npm/full-screen-helper@1.0/full-screen-helper.min.js"></script>
Import:
const FullScreenHelper = require('full-screen-helper');
Import ES6 (eg.: "libs" like Angular/Vue-cli):
import FullScreenHelper from 'full-screen-helper'
RequireJS:
requirejs(['folder/foo/bar/full-screen-helper'], function (FullScreenHelper) {
...
});
Browser support
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)
Usage
For use an video in fullscreen:
<video id="myVideo" src="video.webm"></video>
<button onclick="$('#myVideo').fullScreenHelper('request');">Fullscreen</button>
For use an video in fullscreen (Vanilla.js :P):
<video id="myVideo" src="video.webm"></video>
<button onclick="FullScreenHelper.request('#myVideo');">Fullscreen</button>
or
var element = document.getElementById('myVideo');
...
FullScreenHelper.request(element);
Entire page in fullscreen:
<button onclick="FullScreenHelper.request();">Fullscreen</button>
<button onclick="$('body').fullScreenHelper('request');">Fullscreen</button>
API
Method | Description |
---|---|
FullScreenHelper.supported() | Return true if browser support fullscreen, otherwise return false |
FullScreenHelper.state() | Return true if in fullscreen, otherwise return false |
FullScreenHelper.viewport(boolean) | If define true use fullviewport as fallback to browsers without support to fullscreen. Default is true |
FullScreenHelper.request(element\|selector) | Show element in fullscreen, if there is not another one on fullscreen |
FullScreenHelper.toggle(element\|selector) | Put the element in fullscreen or restore |
FullScreenHelper.exit() | Exit fullscreen mode |
FullScreenHelper.current() | Get current element in fullscreen, otherwise returns null |
FullScreenHelper.on(function () {}) | Add event |
FullScreenHelper.off(function () {}) | Remove event |
jQuery fullscreen API
Method | Equivalent |
---|---|
$(':fullscreen') | FullScreenHelper.current() |
$('...').fullScreenHelper('request') | FullScreenHelper.request(element\|selector) |
$('...').fullScreenHelper('toggle') | FullScreenHelper.toggle(element\|selector) |
$('body').fullScreenHelper('request') | FullScreenHelper.request() |
$('body').fullScreenHelper('toggle') | FullScreenHelper.toggle() |
$(document).bind('fullscreenchange', function () {}) | FullScreenHelper.on(function () {}) |
$(document).unbind('fullscreenchange', function () {}) | FullScreenHelper.off(function () {}) |
$.fullScreenHelper('supported') | FullScreenHelper.supported() |
$.fullScreenHelper('state') | FullScreenHelper.state() |
$.fullScreenHelper('exit') | FullScreenHelper.exit() |
Note ¹:
'request'
is optional in$('...').fullScreenHelper('request')
, you can use$('...').fullScreenHelper()
Note ²: You can use
$('body')
or$(document)
in.fullScreenHelper('toggle')
and.fullScreenHelper('request')
Fullscreen in Internet Explorer
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">
CSS selector
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 */
}
CSS box-sizing
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
.