Hello, im new in js so please dont be hard on me. So issue is that script goes fullscreen as expected but cannot figure out how to trigger "ESC" or same button to close fullscreen. .holds-the-iframe just adds loader before iframe is loaded. <div class="holds-the-iframe"><iframe id="game" style="width:1000px;height:700px;border:0;" allowfullscreen="true" msallowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" sandbox="allow-same-origin allow-popups allow-scripts allow-pointer-lock allow-orientation-lock allow-popups" src="https://randomurl.com/"> </iframe></div> HTML: <button onclick="makeFullscreen('game');">[ ]</button> HTML: function makeFullscreen(id){ var el = document.getElementById(id); el.style = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;" } Code (JavaScript):
Hi weFF, I guess it's not a "true fullscreen" and is the reason why the natively Escape key sequence isn't available. Reference: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
Please try "CLASS" instead of "ID" and you may surely get output! Because you can utilise it A single ID selector can be attached to an element, however a class selector can have many ID selectors.
Actually, I think there's a way to implement this without javascript. Have a look at following page: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>title</title> <style> #iframe-holder{ display: inline-block;/*always wraps iframe content*/ position: relative;/*as reference to absolutely positioned label*/ background-color: red; } #cb{/*hide traditional checkbox, use label for user interaction*/ display: none; } #cb+label{/*label to mimic button*/ position: absolute;/*relative to iframe holder*/ right: 1em; bottom: 1em; display: inline-block; width: 1.4em; height: 1.2em; background-color: lightgray; border-radius: 0.3em; text-align: center; line-height: 1.1em; border: 1px solid gray; } #cb:checked+label{/*is no longer relative to iframe holder*/ position: fixed; z-index: 1;/*pushed forward*/ } #cb+label:before{ content: '[]'; } #cb:checked+label:before{/*label in 'fullscreen' mode*/ content: ']['; } #cb~iframe{ display: block;/*avoid spacing*/ border: 0; } #cb:checked~iframe{/*iframe in 'fullscreen' mode*/ position: fixed; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <h1>h1</h1> <p>Autem exercitationem itaque necessitatibus repudiandae dolores. Unde at molestias qui ut velit libero praesentium velit. Ea eaque eum dolor alias vel incidunt.</p> <div id="iframe-holder"> <input id="cb" type="checkbox"> <label for="cb"></label> <iframe allowfullscreen="true" msallowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" sandbox="allow-same-origin allow-popups allow-scripts allow-pointer-lock allow-orientation-lock allow-popups" src="https://randomurl.com/"></iframe> </div> <p>Fuga quisquam ea doloremque asperiores expedita. Quam provident sint id. Officia ea aut dignissimos qui sint. Voluptas et aut quia dolores illum.</p> </body> </html> HTML:
Very nice, will do some testing for sure. Meanwhite js have issue. I can toggle fullscreen of and off, but as soon as i click on iframe or actually trying to lauch game or video in fullscreen mode "ESC" stops triggering "exitFullScreen". const fullscreenStyle = "position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;" const normalStyle = "width:1000px;height:700px;border:0;" function enterFullScreen(el) { el.style = fullscreenStyle; } function exitFullScreen(el) { el.style = normalStyle; } function toggleFullScreen() { var el = document.getElementById("game"); if (el.style.position === "fixed") { exitFullScreen(el); } else { enterFullScreen(el); } } document.addEventListener("keydown", function(e) { if (e.key === "Escape") { var el = document.getElementById("game"); exitFullScreen(el); } }, false); PHP:
The code in your last post looks okay... perhaps you could share with me an URL link to a demo / sample page?
It feels like there is something going on with Event.stopPropagation() Code (JavaScript): but its a bit too complicated for me to understand. Sure, this "https://submit.lv/2022/01/25/super-onion-boy/" is version you came up. Its almost prefect but i cannot figure out how to prevent iOS Safari from scrolling page at fullscreen. And this "https://submit.lv/2022/01/30/solitaire-13-viena/" is JS version. There might be some wp errors but since page was created just for testing purposes...
Can you help me place fullscreen toggle button at top of screen while iframe is fullscreen? Somehow it's appears in right direction on normal screen and keeps at same place when fullscreen. https://jsfiddle.net/8qpwvo7y/1/
Untested but the simplest I guess is by modifying both enterFullScreen() and exitFullScreen() to include style change of .button1, for example: function enterFullScreen(el) { el.style = fullscreenStyle; document.querySelector('.button1').style = 'position:fixed;top:0;left:0;'; } Code (JavaScript): For exitFullScreen(): function exitFullScreen(el) { el.style = normalStyle; document.querySelector('.button1').style = 'position:absolute;top:auto;left:auto;'; } Code (JavaScript):