How to put an iframe on fullscreen (full screen)?

Question

I made this little player to be used inside a iframe. But I need to give you the option to put it in full screen (as most video players I know do), but I have no idea how to do that.

I’ll leave the player here as an example:

            var QS = function (el) { 
                return document.querySelector(el); 
            };  
        
            document.addEventListener('click', function (e) {

                e.preventDefault();

                if (! e.target.classList.contains('play-video')) return;

                QS('#video').play();

                var buttonOverlay = QS('.video-overlay .play-video');

                buttonOverlay && buttonOverlay.remove();
              
                QS('.video-overlay').style.backgroundColor = 'transparent';
            });

            QS("#pause-video").addEventListener('click', function (e) {
                e.preventDefault();
                QS('#video').pause();
            });

            var durationBar = QS('.play-duration-bar');

            QS('#video').addEventListener('timeupdate', function (e) {

                var total = ((e.target.currentTime / e.target.duration) * 100);
                
                durationBar.style.width = total + '%';
            })

            QS('.play-duration').addEventListener('mousedown', function (e) {

                var rect = e.currentTarget.getBoundingClientRect(),
                    offsetX = e.clientX - rect.left,
                    offsetY = e.clientY - rect.top;

                var fraction = (offsetX / e.currentTarget.clientWidth);

                var video = QS('#video');               

                video.currentTime = video.duration *  fraction;
                
                //durationBar.style.width = (fraction * 100) + '%';
            });

        *, *::after, *::before{
            box-sizing: border-box;
        }
        body{
            padding: 0;
            margin: 0;
            font-family: Arial;
            position: absolute;
            height: 100%;
            width: 100%;
        }

        .player{
           padding: 0;
           margin: 0;
           display: flex;
           flex-direction: column;
           width: 100%;
           height: 100%;
        }

        .player .player-header{
            position: absolute;
            z-index: 2;
            color: white;
            padding: 10px 15px ;
            opacity: .2;
            transition: all .2s linear;
            width: 100%;
        }

        .player:hover .player-header{
              background-color: rgba(0, 0, 0, .8);
              opacity: 1;
        }

        .player .player-header > h1{
            margin: 0;
            padding: 0;
        }

        .player .player-header > p{
            margin: 5px 0;
            font-size: 12px;
        }
        .player video{
           width: 100%;
           height: 100%;
           position: fixed;
        }

        .player .video-wrapper {
            position: relative;
            height: 100%;
            background-color: #00b630;
        }

        .player .video-wrapper .video-overlay{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .6);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .player .player-controls{
            position: fixed;
            bottom: 0;
            text-align: center;
            opacity: .1;
            width: 100%;
            left: 0;
            padding: 15px;
            transition: all .2s linear;
        }

         .player:hover .player-controls {
             opacity: 1;
             background-color: rgba(0, 0, 0, .9);
         }

         .play-duration {
            height: 10px;
            width: 100%;
            background-color: rgba(255, 255, 255, .2);
            position: relative;
            margin: 15px 0;
            cursor: pointer;
         }

         .play-duration .play-duration-bar{
            background-color: #00b630;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 0;
         }

        .btn{
            background-color: #00b630;
            border: none;
            padding: 5px;
            color: white;
            font-size: 15px;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .btn.btn-lg{
            width: 80px;
            height: 80px;
            font-size: 25px;
        }

        .btn:active{
            transform: translateY(2px);
        }

<div id="player" class="player">
            <div class="player-header">
                <h1>Nome do Vídeo</h1>
                <p>
                    descrição do vídeo
                </p>
            </div>
            <div class="video-wrapper">
                <video src="//download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4" id="video"></video>
                <div class="video-overlay">
                    <a class="play-video" style="height: 45px; display: block; cursor: pointer;">
                        <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%" style="pointer-events: none">
                            <path fill="#00b630" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#212121" fill-opacity="0.8"></path>
                            <path d="M 45,24 27,14 27,34" fill="#fff"></path>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="player-controls">
                <div class="play-duration">
                    <div class="play-duration-bar"></div>
                </div>
                <button class="btn play-video">
                    <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%" style="pointer-events: none">>
                        <path fill="white" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" ></path>
                    </svg>
                </button>
                <button id="pause-video" class="btn btn">
                    <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%" style="pointer-events: none">>
                        <path fill="white" d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z"></path>
                    </svg>
                </button>
            </div>
        </div>

I need to know, how do you put one iframe fullscreen?

Answer 1

You can use the fullscreen API: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

However it is worth noting that this API still uses prefixes for different browser engines, so you will have to make a condition for each browser to be able to use the requestFullscreen, could then add a button in the player, getting something like:

        <div class="player-controls">
            <div class="play-duration">
                <div class="play-duration-bar"></div>
            </div>
            <button class="btn play-video">
                <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%" style="pointer-events: none">>
                    <path fill="white" d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" ></path>
                </svg>
            </button>
            <button id="pause-video" class="btn btn">
                <svg height="100%" version="1.1" viewBox="0 0 36 36" width="100%" style="pointer-events: none">>
                    <path fill="white" d="M 12,26 16,26 16,10 12,10 z M 21,26 25,26 25,10 21,10 z"></path>
                </svg>
            </button>
            <button id="fullscreen-video" class="btn btn">
                Fullscreen
            </button>
        </div>

and in Javascript like this:

var player = QS('#player'),
    btnFull = QS('#fullscreen-video');

btnFull.addEventListener('click', function () {

    //Navegadores Webkit (Safari por exemplo), Blink/Chromium (Chrome por exemplo) e Edge
    if (player.webkitRequestFullscreen) {

        //Verifica se não esta em fullscreen, se estiver ele volta ao normal
        if (!document.webkitFullscreenElement) {
            player.webkitRequestFullscreen();
        } else {
            player.webkitExitFullscreen();
        }
    }

    //Navegadores Gecko (Firefox por exemplo)
    } elseif (player.mozRequestFullScreen) {

        //Verifica se não esta em fullscreen, se estiver ele volta ao normal
        if (!document.mozFullScreenElement) {
            player.mozRequestFullScreen();
        } else {
            player.mozCancelFullScreen();
        }
    }

    // IE 11
    elseif (player.msRequestFullscreen) {

        //Verifica se não esta em fullscreen, se estiver ele volta ao normal
        if (!document.msFullscreenElement) {
            player.msRequestFullscreen();
        } else {
            player.msExitFullscreen();
        }
    }

    //api padronizada
    elseif (player.requestFullscreen) {

        //Verifica se não esta em fullscreen, se estiver ele volta ao normal
        if (!document.fullscreenElement) {
            player.requestFullscreen();
        } else {
            player.exitFullscreen();
        }
    }

    //Mensagem de erro para navegadores sem suporte
    else {
        alert('Seu navegador não suporta fullscreen');
    }
});

---

full-screen-helper.js

I also developed a library called full-screen-helper.js, in addition to detecting which vendor is needed it also has a "fallback" for unsupported browsers, so instead of using fullscreen it uses a full-viewport (if so you wish), which can facilitate in mobile browsers, which usually do not allow fullscreen.

It also has a fallback for IE8, 9 and 10 that uses Activex to stay on fullscreen.

Another thing that the full-screen-helper.js help is to avoid the problem with the selectors :fullscreen, :full-screen, :-webkit-full-screen, :-moz-full-screen and :-ms-fullscreen, wear like this:

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

The selectors will not work because it conforms to W3 https://www.w3.org/TR/selectors4/#Logical-Combination if one of the selectors in Rule is invalid then the CSS ignores all, ie :-moz-full-screen does not work in Chrome, so the :-webkit-full-screen will be disregarded also as both are in the same Rule, we are then obliged to use this:

/* 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 */
}

And keep repeating CSS, IE is repeating code, but using the full-screen-helper.js you will have only one selector, the:

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

Which will be applied only if the object is in fullscreen or full-viewport.

Then just download the files:

• https://raw.githubusercontent.com/brcontainer/full-screen-helper.js/master/full-screen-helper.min.js
• https://raw.githubusercontent.com/brcontainer/full-screen-helper.js/master/full-screen-helper.css

And save in your website folder and then call like this:

<head>
    <link rel="stylesheet" type="text/css" href="full-screen-helper.css">
    <script type="text/javascript" src="full-screen-helper.js"></script>
</head>

The use is simple:

<button onclick="FullScreenHelper.request(document.getElementById('examplo'));">
    FullScreen
</button>

<div id="exemplo">
    <p>olá mundo!</p>
    <button onclick="FullScreenHelper.exit();">Sair de fullscreen</button>
</div>