Iframe enter fullscreen mode

javascript jquery html iframe

13,700

Solution 1

I've removed video references, try that:

(function(window, document){
        var $ = function(selector,context){return(context||document).querySelector(selector)};

        var iframe = $("iframe"),
            domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');

        var fullscreen = function(elem) {
            var prefix;
            // Mozilla and webkit intialise fullscreen slightly differently
            for ( var i = -1, len = domPrefixes.length; ++i < len; ) {
              prefix = domPrefixes[i].toLowerCase();

              if ( elem[prefix + 'EnterFullScreen'] ) {
                // Webkit uses EnterFullScreen for video
                return prefix + 'EnterFullScreen';
                break;
              } else if( elem[prefix + 'RequestFullScreen'] ) {
                // Mozilla uses RequestFullScreen for all elements and webkit uses it for non video elements
                return prefix + 'RequestFullScreen';
                break;
              }
            }

            return false;
        };              
        // Webkit uses "requestFullScreen" for non video elements
        var fullscreenother = fullscreen(document.createElement("iframe"));

        if(!fullscreen) {
            alert("Fullscreen won't work, please make sure you're using a browser that supports it and you have enabled the feature");
            return;
        }

        $("#fullscreeniframe").addEventListener("click", function(){
            // iframe fullscreen and non video elements in webkit use request over enter
            iframe[fullscreenother]();
        }, false);
    })(this, this.document);

Solution 2

I have extended the solution provided by @A.Wolff , I have added a button within the Iframe you can check the solution right here on w3

Full screen toogle with inside/internal button| W3

Regards

13,700

Ramy Khalid

Updated on September 17, 2022

Comments

Ramy Khalid over 1 year

I need to make iframe enter fullscreen mode, i am using iframe to display pdf file by google docs viewer i need this iframe to enter fullscreen. I have found an code in the internet for displaying html video and iframe and there full screen but when i try to remove the video, the fullscreen never work In this code the iframe (fullscreen) not working

<!DOCTYPE HTML>

<link rel="stylesheet" type="text/css" href="_styles.css" media="screen">

<title>Fullscreen API | The CSS Ninja</title>

<div class="fl">
    <iframe src="http://thecssninja.com/talks/dnd_and_friends/" width="320" height="240" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><br /> 
    <button id="fullscreeniframe" class="button">Fullscreen iframe</button>
</div>

<script>
    (function(window, document){
        var $ = function(selector,context){return(context||document).querySelector(selector)};

        var video  = $("video"),
            iframe = $("iframe"),
            domPrefixes = 'Webkit Moz O ms Khtml'.split(' ');

        var fullscreen = function(elem) {
            var prefix;
            // Mozilla and webkit intialise fullscreen slightly differently
            for ( var i = -1, len = domPrefixes.length; ++i < len; ) {
              prefix = domPrefixes[i].toLowerCase();

              if ( elem[prefix + 'EnterFullScreen'] ) {
                // Webkit uses EnterFullScreen for video
                return prefix + 'EnterFullScreen';
                break;
              } else if( elem[prefix + 'RequestFullScreen'] ) {
                // Mozilla uses RequestFullScreen for all elements and webkit uses it for non video elements
                return prefix + 'RequestFullScreen';
                break;
              }
            }

            return false;
        };

        // Will return fullscreen method as a string if supported e.g. "mozRequestFullScreen" || false;
        var fullscreenvideo = fullscreen(document.createElement("video"));

        // Webkit uses "requestFullScreen" for non video elements
        var fullscreenother = fullscreen(document.createElement("iframe"));

        if(!fullscreen) {
            alert("Fullscreen won't work, please make sure you're using a browser that supports it and you have enabled the feature");
            return;
        }

        // Should add prefixed events for potential ms/o or unprefixed support too
        video.addEventListener("webkitfullscreenchange",function(){
            console.log(document.webkitIsFullScreen);
        }, false);
        video.addEventListener("mozfullscreenchange",function(){
            console.log(document.mozFullScreen);
        }, false);

        $("#fullscreenvid").addEventListener("click", function(){
            // The test returns a string so we can easily call it on a click event
            video[fullscreenvideo]();
        }, false);
        $("#fullscreeniframe").addEventListener("click", function(){
            // iframe fullscreen and non video elements in webkit use request over enter
            iframe[fullscreenother]();
        }, false);
    })(this, this.document);
</script>

http://www.thecssninja.com/demo/fullscreen/

Ramy Khalid over 10 years

in next time i will use consule it is helpful
DroidDev over 3 years

Hi, in Chrome Version 86.0.4240.75 Esc is not working sometimes to exit the full screen after entering the full screen mode.
DroidDev over 3 years

It means after entering into full screen mode then I clicked inside the pdf, in this situation the ESC is not returning to normal mode.