How to make the window full screen with Javascript (stretching all over the screen)

Asked 14/7, 2009 at 12:35 Answered 6/7, 2023 at 13:14

Solved javascript fullscreen

297

How can I make a visitor's browser go fullscreen using JavaScript, in a way that works with IE, Firefox and Opera?

Imre answered 14/7, 2009 at 12:35 Comment(9)

link #1031428 – Hanoverian 14/7, 2009 at 12:40

its inner application , not for the public . im not going to abuse any one – Imre 15/7, 2009 at 6:26

You could, pragmatically, ask the user:

sprintf('Dear user, the best experience with this site is in fullscreen mode. To view this site full screen, press %s.', _get_browsers_full_Screen_key())

– Kirsti 27/3, 2010 at 13:52

I am curious how the youtube fullscreen works. Anyone knows the answer? – Adenaadenauer 29/9, 2010 at 20:54

this is done by the flash player not the browser – Imre 30/9, 2010 at 13:8

For a state of the art overview look here: hacks.mozilla.org/2012/01/… – Salmonberry 20/6, 2012 at 6:44

He is asking a question. That's is his ( her ) problem to use or not use fullscreen. Comercial sites don't like that because nobody can see the adds. – Beseem 25/10, 2013 at 3:30

Possible duplicate of Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript – Creak 1/11, 2016 at 11:31

https://mcmap.net/q/101946/-how-to-make-browser-full-screen-using-f11-key-event-through-javascript-duplicate has the best solution for me. I have this working in a Blazor application on Chrome 👍 – Takahashi 5/11, 2019 at 8:3

This is as close as you can get to full screen in JavaScript:

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);

        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }
</script>

Tweezers answered 14/7, 2009 at 12:41 Comment(10)

look at the link/accepted answer in the link haim evgi posted ... you're not supposed to be able to resize the browser. You can however maximize within the browsers window (that how I read it) – Considered 14/7, 2009 at 12:52

Strange, I just re-tested this script in FF 3.5 and it seemed to work fine... what are we missing? – Tweezers 14/7, 2009 at 12:56

Depends on your javascript permission settings in Options. You can toggle js control over window features. – Borax 14/7, 2009 at 13:2

This happened last time a site used code like that and I didn't block it: dorward.me.uk/tmp/fullscreen.jpeg – Sterling 8/4, 2010 at 14:39

Take a look at the webkit-fullscreen API: bleeding-edge-tlv.appspot.com/#28 (from #gdd2011) – Aurora 9/1, 2012 at 12:50

THIS IS OLD. LOOK BELOW FOR THE SOLUTION! – Moor 19/4, 2014 at 18:32

moveTo and resizeTo are DOM0: not in any standard. – Suprematism 20/8, 2014 at 14:38

Might help anyone, Works in all Browsers tested for me its working.

<script>  	var popupScreenParameters = [ 	'height='+screen.height, 	'width='+screen.width,       'fullscreen=yes'     	].join(',');     	       var windowVariable = window.open('popupUrl',"popupName",popupScreenParameters);       windowVariable .moveTo(0,0); </script>

– Richelieu 31/8, 2015 at 12:32

The answer by @Towel should be accepted, This is old & not working. – Mcclean 18/4, 2016 at 9:24

@Imre Could you please "unaccept" this answer so that we can get it off the top of the list? You even said yourself that it doesn't work. – Alicealicea 5/6, 2018 at 10:36

318

In newer browsers such as Chrome 15, Firefox 10, Safari 5.1, IE 10 this is possible. It's also possible for older IE's via ActiveX depending on their browser settings.

Here's how to do it:

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);

The user obviously needs to accept the fullscreen request first, and there is not possible to trigger this automatically on pageload, it needs to be triggered by a user (eg. a button)

Towel answered 23/9, 2011 at 7:40 Comment(15)

Currently available in Chrome 15, Firefox 10, and Safari 5.1. See this hacks.mozilla.org blog post for details on the current state of play. – Marianomaribel 2/2, 2012 at 13:41

Fantastic, any way to exit full screen? – Wagshul 22/9, 2013 at 12:4

A few things. In IE this will obviously ignore the element and full screen everything. If you do want to full screen everything pass in document.documentElement that will ensure you'll get the correct root element('html' or 'body'). And use can use cancelFullscreen() to close it (or send 'F11' again for IE). – Seasick 16/10, 2013 at 16:56

It can only be triggered by the user (for example via a fullscreen button). Automatic fullscreen during onload is not possible. – Hernandes 4/3, 2014 at 15:55

spelling error for IE, should be msRequestFullScreen, as in the docs msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx – Babirusa 28/4, 2014 at 8:44

My JSLint said warned "ActiveXObject undefined" on var wscript = new ActiveXObject("WScript.Shell"); --- i can write window.ActiveXObject instead of just ActiveXObject here and make JSLint happy without crashing the code for IE right? – Tolle 29/1, 2015 at 12:11

Would be awesome to have a cancel function included in this answer, as well as warning that you cant let the user enter stuff using the keyboard when in fullscreen (unless requested in chrome...) for security reasons – Tolle 29/1, 2015 at 12:13

The only problem is when I click on a link in the same domain. – Keeter 11/5, 2016 at 12:40

What have you thought of my god old friend opera browser? – Hectometer 2/12, 2016 at 16:11

@Babirusa - element.msRequestFullScreen is incorrect. It should be element.msRequestFullscreen with a lowercase s for Fullscreen. See msdn.microsoft.com/en-us/library/dn254939(v=vs.85).aspx. – Auricula 19/4, 2017 at 13:26

@Auricula today you are right, but I'm not sure, if it you were in 2014. – Babirusa 19/4, 2017 at 13:35

A nice high-level abstract API you can use is Sindre Sorhus' Screenfull.js module (github.com/sindresorhus/screenfull.js) which should support the Opera browser as well. It takes care of the vendor prefixes. – Writhen 30/5, 2019 at 8:53

Better to use var elem = document.documentElement instead of document.body as it uses the correct background-color. – Mnemonic 30/5, 2022 at 2:51

Uncaught (in promise) TypeError: Fullscreen request denied error... dont works – Erich 31/10, 2022 at 1:25

This seems to remove any styling on html or body in Edge – Aposiopesis 27/1, 2023 at 16:6

The following code requests the Web page to go full screen in modern Web browsers. See this answer's edit history for code to enable full screen for older Web browsers, including Internet Explorer.

var el = document.documentElement,
    rfs = el.requestFullscreen;
if(typeof rfs!="undefined" && rfs){
  rfs.call(el);
}

See also:

Chrome Fullscreen API (note, however, that requestFullscreen "only works during" "[m]ost UIEvents and MouseEvents, such as click and keydown, etc.", "so it cannot be used maliciously".)

Ventilation answered 1/11, 2011 at 12:35 Comment(5)

Works on IE 8 above, FF10 above (tried in FF 9, it doesn't work), tested on Chrome 18 – Marquittamarr 10/4, 2012 at 1:50

@Peter O. "should be placed in an event handler", any way to trigger it onload? – Sitsang 24/10, 2012 at 20:15

@FrancisP: No; neither "load" nor "DOMContentLoaded" is an applicable UIEvent or MouseEvent for the Fullscreen API. – Ventilation 24/10, 2012 at 20:22

Thanks for "(note, however, that requestFullScreen "only works during" "[m]ost UIEvents and MouseEvents, such as click and keydown, etc.", "so it cannot be used maliciously".)" – Periphrastic 27/3, 2013 at 10:26

Yes documentElement is better than body for me. – Rom 28/7, 2017 at 15:3

This is as close as you can get to full screen in JavaScript:

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);

        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }
</script>

Tweezers answered 14/7, 2009 at 12:41 Comment(10)

Strange, I just re-tested this script in FF 3.5 and it seemed to work fine... what are we missing? – Tweezers 14/7, 2009 at 12:56

Depends on your javascript permission settings in Options. You can toggle js control over window features. – Borax 14/7, 2009 at 13:2

This happened last time a site used code like that and I didn't block it: dorward.me.uk/tmp/fullscreen.jpeg – Sterling 8/4, 2010 at 14:39

Take a look at the webkit-fullscreen API: bleeding-edge-tlv.appspot.com/#28 (from #gdd2011) – Aurora 9/1, 2012 at 12:50

THIS IS OLD. LOOK BELOW FOR THE SOLUTION! – Moor 19/4, 2014 at 18:32

moveTo and resizeTo are DOM0: not in any standard. – Suprematism 20/8, 2014 at 14:38

Might help anyone, Works in all Browsers tested for me its working.

<script>  	var popupScreenParameters = [ 	'height='+screen.height, 	'width='+screen.width,       'fullscreen=yes'     	].join(',');     	       var windowVariable = window.open('popupUrl',"popupName",popupScreenParameters);       windowVariable .moveTo(0,0); </script>

– Richelieu 31/8, 2015 at 12:32

The answer by @Towel should be accepted, This is old & not working. – Mcclean 18/4, 2016 at 9:24

@Imre Could you please "unaccept" this answer so that we can get it off the top of the list? You even said yourself that it doesn't work. – Alicealicea 5/6, 2018 at 10:36

Here is a complete solution to get in and out of full screen mode (aka cancel, exit, escape)

        function cancelFullScreen() {
            var el = document;
            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen||el.webkitExitFullscreen;
            if (requestMethod) { // cancel full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

        function requestFullScreen(el) {
            // Supports most browsers and their versions.
            var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;

            if (requestMethod) { // Native full screen.
                requestMethod.call(el);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
            return false
        }

        function toggleFullScreen(el) {
            if (!el) {
                el = document.body; // Make the body go full screen.
            }
            var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) ||  (document.mozFullScreen || document.webkitIsFullScreen);

            if (isInFullScreen) {
                cancelFullScreen();
            } else {
                requestFullScreen(el);
            }
            return false;
        }

Beitz answered 5/8, 2012 at 22:46 Comment(4)

What about msIsFullScreen? – Chlor 14/4, 2014 at 20:14

The spec has changed. webkitCancelFullScreen is now webkitExitFullscreen. generatedcontent.org/post/70347573294/… – Ngocnguyen 9/6, 2014 at 22:55

the first part of this logical and operation is redundant and should be removed document.fullScreenElement && document.fullScreenElement !== null – Tolle 29/1, 2015 at 12:21

change the elem in toggleFull() from document.body to document.documentElement to fix left and right margin issue – Icterus 14/4, 2016 at 11:4

You can use The fullscreen API You can see an example here

The fullscreen API provides an easy way for web content to be presented using the user's entire screen. This article provides information about using this API.

Kep answered 8/11, 2012 at 18:2 Comment(0)

This function work like a charm

function toggle_full_screen()
{
    if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen))
    {
        if (document.documentElement.requestFullScreen){
            document.documentElement.requestFullScreen();
        }
        else if (document.documentElement.mozRequestFullScreen){ /* Firefox */
            document.documentElement.mozRequestFullScreen();
        }
        else if (document.documentElement.webkitRequestFullScreen){   /* Chrome, Safari & Opera */
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
        else if (document.msRequestFullscreen){ /* IE/Edge */
            document.documentElement.msRequestFullscreen();
        }
    }
    else
    {
        if (document.cancelFullScreen){
            document.cancelFullScreen();
        }
        else if (document.mozCancelFullScreen){ /* Firefox */
            document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen){   /* Chrome, Safari and Opera */
            document.webkitCancelFullScreen();
        }
        else if (document.msExitFullscreen){ /* IE/Edge */
            document.msExitFullscreen();
        }
    }
}

To use it just call:

toggle_full_screen();

Hessenassau answered 28/1, 2021 at 19:28 Comment(1)

This is the only answer that worked for me, except it exits when you navigate :( – Aposiopesis 27/1, 2023 at 16:12

The new html5 technology – fullscreen API gives us an easy way to present a web page content in full-screen mode. We are about to give you detailed information about the fullscreen mode. Just try to imagine about all possible advantages which you can get using this technology – full-screen photo albums, videos, and even games.

But before we describe this new technology, I have to note that this technology is experimental, and supported by all major Browsers.

You can find the full tutorial here : http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

Here is working Demo : http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm

Speedwriting answered 18/2, 2015 at 16:53 Comment(1)

@Ian It is working in IE edge. Older version of IE is not supporting this. – Speedwriting 2/10, 2017 at 5:3

I've used this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
    <script language="JavaScript">
        function fullScreen(theURL) {
            window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
        }
        // End -->
    </script>
</head>

<body>
    <h1 style="text-align: center;">
        Open In Full Screen
    </h1>
    <div style="text-align: center;"><br>
        <a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
            Open Full Screen Window
        </a>
    </div>
</body>

</html>

Convince answered 8/4, 2010 at 14:37 Comment(2)

window.open(theURL, '', 'fullscreen=yes', 'scrollbars=auto'); There is a parens problem on this line – Udder 14/7, 2011 at 11:37

That is from the parent though. Not helpful when the window has already been opened. – Undertaker 16/5, 2014 at 6:40

Simple example from: http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/

<script type="text/javascript">
  function goFullscreen(id) {
    // Get the element that we want to take into fullscreen mode
    var element = document.getElementById(id);

    // These function will not exist in the browsers that don't support fullscreen mode yet, 
    // so we'll have to check to see if they're available before calling them.

    if (element.mozRequestFullScreen) {
      // This is how to go into fullscren mode in Firefox
      // Note the "moz" prefix, which is short for Mozilla.
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      // This is how to go into fullscreen mode in Chrome and Safari
      // Both of those browsers are based on the Webkit project, hence the same prefix.
      element.webkitRequestFullScreen();
   }
   // Hooray, now we're in fullscreen mode!
  }
</script>

<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>

Neldanelia answered 28/2, 2013 at 12:59 Comment(0)

Create Function

function toggleFullScreen() {

            if ((document.fullScreenElement && document.fullScreenElement !== null) ||
                    (!document.mozFullScreen && !document.webkitIsFullScreen)) {
             $scope.topMenuData.showSmall = true;
                if (document.documentElement.requestFullScreen) {
                    document.documentElement.requestFullScreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                } else if (document.documentElement.webkitRequestFullScreen) {
                    document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
                }
            } else {

                  $scope.topMenuData.showSmall = false;
                if (document.cancelFullScreen) {
                    document.cancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }
        }

In Html Put Code like

<ul class="unstyled-list fg-white">

            <li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
            <li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
        </ul>

Twosided answered 19/8, 2016 at 7:30 Comment(1)

if statement doesn't seem to detect that in full screen mode in IE 11 (so doesn't close). – Averroism 10/3, 2017 at 16:6

Try screenfull.js. It's a nice cross-browser solution that should work for Opera browser as well.

Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to.

Demo.

Writhen answered 30/5, 2019 at 9:24 Comment(0)

Luckily for unsuspecting web users this cannot be done with just javascript. You would need to write browser specific plugins, if they didn't already exist, and then somehow get people to download them. The closest you can get is a maximized window with no tool or navigation bars but users will still be able to see the url.

window.open('http://www.web-page.com', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">

This is generally considered bad practice though as it removes a lot of browser functionality from the user.

Isidora answered 14/7, 2009 at 12:56 Comment(0)

Now that the full screen APIs are more widespread and appear to be maturing, why not try Screenfull.js? I used it for the first time yesterday and today our app goes truly full screen in (almost) all browsers!

Be sure to couple it with the :fullscreen pseudo-class in CSS. See https://www.sitepoint.com/use-html5-full-screen-api/ for more.

Goliath answered 7/9, 2016 at 10:15 Comment(1)

Amazing little script. Using it on my website now at www.StarCommanderOnline.com. Thx! – Selfpronouncing 4/5, 2017 at 2:49

This may support

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript">
            function max()
            {
               window.open("", "_self", "fullscreen=yes, scrollbars=auto"); 
            }
        </script>
    </head>
    <body onload="max()">
        <form id="form1" runat="server">
        <div>
        This is Test Page
        </div>
        </form>
    </body>
    </html>

Nudism answered 13/11, 2009 at 12:45 Comment(0)

Can you Try:

<script type="text/javascript">
    function go_full_screen(){
      var elem = document.documentElement;
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullscreen) {
        elem.webkitRequestFullscreen();
      }
    }
</script>

<a href="#" onClick="go_full_screen();">Full Screen / Compress Screen</a>

Antilles answered 27/12, 2018 at 12:43 Comment(1)

Seems to fail for me in Chrome 76 on Ubuntu – Feud 4/9, 2019 at 20:57

This will works to show your window in full screen

Note: For this to work, you need Query from http://code.jquery.com/jquery-2.1.1.min.js

Or make have javascript link like this.

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

   <div id="demo-element">
        <span>Full Screen Mode Disabled</span>
        <button id="go-button">Enable Full Screen</button>
    </div>
    <script>
    function GoInFullscreen(element) {
        if(element.requestFullscreen)
            element.requestFullscreen();
        else if(element.mozRequestFullScreen)
            element.mozRequestFullScreen();
        else if(element.webkitRequestFullscreen)
            element.webkitRequestFullscreen();
        else if(element.msRequestFullscreen)
            element.msRequestFullscreen();
    }

    function GoOutFullscreen() {
        if(document.exitFullscreen)
            document.exitFullscreen();
        else if(document.mozCancelFullScreen)
            document.mozCancelFullScreen();
        else if(document.webkitExitFullscreen)
            document.webkitExitFullscreen();
        else if(document.msExitFullscreen)
            document.msExitFullscreen();
    }

    function IsFullScreenCurrently() {
        var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;

        if(full_screen_element === null)
            return false;
        else
            return true;
    }

    $("#go-button").on('click', function() {
        if(IsFullScreenCurrently())
            GoOutFullscreen();
        else
            GoInFullscreen($("#demo-element").get(0));
    });

    $(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
        if(IsFullScreenCurrently()) {
            $("#demo-element span").text('Full Screen Mode Enabled');
            $("#go-button").text('Disable Full Screen');
        }
        else {
            $("#demo-element span").text('Full Screen Mode Disabled');
            $("#go-button").text('Enable Full Screen');
        }
    });</script>

Jural answered 27/1, 2019 at 13:31 Comment(1)

this seems to be working for most browsers, Does not seems to work on Safari on iOS. Did you find any workaround for that? – Heger 15/1, 2022 at 13:54

Those days, one line is enough:

document.documentElement.requestFullscreen()

Supported by all major browsers.

Renter answered 6/7, 2023 at 13:14 Comment(0)

Try this script

<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
}
</script>

For calling from script use this code,

window.fullScreen('fullscreen.jsp');

or with hyperlink use this

<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');"> 
Open in Full Screen Window</a>

Afterworld answered 16/12, 2011 at 7:18 Comment(0)

In Firefox 10, you can make the current page go fullscreen (real fullscreen with no window chrome) using this javascript:

window.fullScreen = true;

Supremacy answered 11/2, 2012 at 0:45 Comment(1)

The term "supposed to" is so overloaded in software. In some browsers it is read-only. Firefox 10 lets you set it. – Supremacy 28/2, 2012 at 5:37

A Q&D way to go full screen, if you are in a "kiosk" situation, is to feed an F11 to the browser window after it's up and running. This is not pretty starting up and the user might be able to poke a touch screen at the top and get a semi-full-screen view, but feeding the F11 might do in a pinch or just to get started on a project.

Blowtube answered 19/4, 2012 at 7:59 Comment(0)

Here is my full solution for Full Screen and Exit Full Screen both (many thanks to help from tower's answer above):

$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
    var element = document.body;

    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }

    $.is_fs = true;    
    $(calr).val('Exit Full Screen');
}

$.cancel_fs = function(calr)
{
    var element = document; //and NOT document.body!!
    var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;

    if (requestMethod) { // Native full screen.
    requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }    

    $(calr).val('Full Screen');    
    $.is_fs = false;
}

$.toggleFS = function(calr)
{    
    $.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}

});

// CALLING:

<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />

Indeclinable answered 2/2, 2018 at 1:52 Comment(0)

-1

function fs(){plr.requestFullscreen();document.exitFullscreen()}; or function fs(){(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()}

<!DOCTYPE html><html><head>

<style>
body{background:#000}
#plr{position:relative;background:#fff;width:360px}
#vd{width:100%;background:grey}
button{width:48px;height:48px;border:0;background:grey}
</style>

</head><body>

<div id="plr">
<video id="vd" src="video.mp4"></video>
<button onclick="(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()">fs</button>
<button onclick="plr.requestFullscreen();document.exitFullscreen()">fs2</button>
</div>

</body></html>

Dail answered 25/4, 2021 at 23:0 Comment(0)

-1

 <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
    
    <h2>Fullscreen with JavaScript</h2>
    <p>Click on the button to open the video in fullscreen mode.</p>
    <button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
    <p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
    
    <video width="100%" controls id="myvideo">
      <source src="rain.mp4" type="video/mp4">
      <source src="rain.ogg" type="video/ogg">
      Your browser does not support the video tag.
    </video>
    
    
    <script>
    var elem = document.getElementById("myvideo");
    function openFullscreen() {
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.webkitRequestFullscreen) { /* Safari */
        elem.webkitRequestFullscreen();
      } else if (elem.msRequestFullscreen) { /* IE11 */
        elem.msRequestFullscreen();
      }
    }
    </script>
    
    <p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>
    
    </body>
    </html>

Source:https://www.w3schools.com/howto/howto_js_fullscreen.asp

Hootchykootchy answered 22/6, 2021 at 13:27 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags