JSFiddle - React, Tailwind, and code Playground

by Jowed

HTML

<iframe src="https://my.matterport.com/show/?m=e7VsF6wKKBk"></iframe><br />
<button onclick="makeFullScreen()">Make Full Screen</button>

CSS

body, html {
    height: 100%;
    margin: 0;
    overflow: hidden;
}
iframe {
    width: 500px;
    height: 500px;
}
iframe.fullScreen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

JavaScript

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}");
        }
    }
}

function makeFullScreen() {
    document.getElementsByTagName("iframe")[0].className = "fullScreen";
    var elem = document.body;
    requestFullScreen(elem);
}