Can I open the iframe in FullScreen if screen size is small?

Question

I have this link.

http://minjago.com/beta/index.php/front/game/499

I want that if my screen size is less than 500, the allowfullscreen is triggered to true. How can I achieve this? I don't want it to be done via CSS.

Agree with ^^^^^^ [How to make in Javascript full screen windows (stretching all over the screen)](http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-stretching-all-over-the-screen) might help you — Satpal, Oct 12 '16 at 13:23

Chris M · Answer 1 · 2016-10-12T18:45:27.607

In case you can't find another way, here's how to do it with CSS. Create two iframes, one having allowfullscreen set as true and another set to false. With CSS have the iframe that has allowfullscreen set to true hidden on screens larger then 500 while having the one set as false hidden on screens sized 500 or smaller.

CSS:

@media (max-width:500px){.hidden-large{display:none!important}}
@media (min-width:501px){.hidden-small{display:none!important}}

Then include the class hidden-large or hidden-small in the iframes.

score 0 · Answer 2 · answered Oct 12 '16 at 15:36

You could potentially use a modal blocker...it involved another step in the UX but gets the job done.

HTML:

<iframe id="fullscreen" src="http://jsfiddle.net" allowfullscreen></iframe>

<div id="confirm" style="display:none;position:fixed;width:100%;height:100%;text-align:center;padding-top:30px;background:rgba(0,0,0,.75);top:0;left:0;">
  <button id="allow">Allow fullscreen</button>
  <button id="cancel">Cancel fullscreen</button>
</div>

JS:

jQuery(document).ready(function()
{
  if( jQuery( window ).width() <= 600 )
  {
    jQuery('#confirm').show();
    jQuery('#allow').on('click', function(e){
      document.getElementById('fullscreen').webkitRequestFullScreen();
      jQuery('#confirm').hide();
      e.stopPropagation();
    });
    jQuery('#confirm,#cancel').on('click', function(){
      jQuery('#confirm').hide();
    });
  }
});

You'll have to add checks to determine which RequestFullscreen() to use (moz/webkit etc). Otherwise, this example works, can test here: https://jsfiddle.net/tsdexter/g1evfepj/

HINT: make the viewport in jsfiddle less than 600px wide to see it working.

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

Instead of relying on CSS media queries, you can use matchMedia() to manage how your app handles viewport sizes. The Full Screen API requires user interaction, so this procedure requires a little bit of CSS.

The details are commented in the Snippet.
Because of the sandbox restrictions, the Snippet will not function correctly. So a PLUNKER is also available for review as well.
When reviewing the Plunker, click the blue button that opens the preview in a new window.
Resize the new window width to 500px or less.
The viewport should darken which is a cue to the user that there's an overlay.
Once the overlay is clicked, it will go full screen.

SNIPPET

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>fs</title>
  <style>
    /* Although CSS is excluded by request from OP, this is 
    | an exception and in this circumstance necessary. User
    | must interact for Full Screen API to work. In abscence
    | of a pure programmitic solution, one must rely on CSS
    | and/or HTML.
    */
    .overlay {
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      z-index: 1;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, .3);
      display: none;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <!--Add this div to HTML-->
  <div class='overlay'></div>
  <iframe id="fullscreen" src="http://www.example.com" width='100%' height='500' allowfullscreen></iframe>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    /*
        | Create a mediaQueryList (mql) with a query that matches
        | a viewport of 500px or less.
        | Pass it into the function mqr()
        | Add a listener to mql and assign mqr() as event handler.
        | Reference target as a jQuery object (iframe).
        */
    var $obj = $('iframe');
    var mql = window.matchMedia("screen and (max-device-width: 500px)");
    mqr(mql);
    mql.addListener(mqr);

    /*
    | Reference .overlay as jQuery object 
    | (overlay is display: none initially)
    | Reference #fullscreen as a plain object.
    | Use the .matches property to compare mql to viewport
    | If the viewport is < 500px then...
    | ...show() overlay then...
    | ...pass overlay and fs to the fs() function
    */
    function mqr(mql) {
        var overlay = $('.overlay');

        if (mql.matches) {
          overlay.show();
          fs(overlay, $obj);
        }
      }
      // isFullScreen() function will verify if full screen is active
    var isFullScreen = function() {
      return !!(document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
    }

    /*
    | fs() function will delegate click event on a given
    | element (first parameter).
    | When triggered, it will target the element (second 
    | parameter) and dereference it in order to use the 
    | Full Screen API.
    | The isFullScreen function determines if full 
    | screen is already active...
    | if not active requestFullscreen method is called...
    | ...if it is, then exitFullscreen method is called.
    */
    function fs(overlay, $obj) {
      overlay.on('click', function() {
        var fs = $obj[0];
        if (!isFullScreen()) {
          if (fs.requestFullscreen) {
            fs.requestFullscreen();
          } else if (fs.mozRequestFullScreen) {
            fs.mozRequestFullScreen();
          } else if (fs.webkitRequestFullscreen) {
            fs.webkitRequestFullscreen();
          } else if (fs.msRequestFullscreen) {
            fs.msRequestFullscreen();
          }
        } else {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        }
      });
    }
  </script>
</body>

</html>

Can I open the iframe in FullScreen if screen size is small?

3 Answers3

SNIPPET