Question 202073 in Html Question posted in
Some basic documentation can be found here.

Html – How can I make an iFrame fullscreen on a button click, without JS?

I’m currently trying to fullscreen an iFrame on a button click, similar to this website. This website has a bar that goes fullscreen with the iframed game, which is what I would ideally like to do. I can’t really figure out how to do this. If possible, I would prefer to use no JavaScript, but let me know if there is an easier method with JavaScript. I’m pretty new to coding, so any help would mean a lot.

Below is the iFrame code and the image/title of the game.

  <html>
    <iframe src="https://1v1.lol" style="border:0px #ffffff none;" name="" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="465px" width="740px" allowfullscreen="yes" ></iframe>
    <p>
<span style="color: #000000;">
<img src="https://geometryspot.com/wp-content/uploads/2023/05/1001v1LOL.webp" style="width: 35px; position: relative; left: 15px">
<span>&nbsp&nbsp&nbsp&nbsp&nbsp1v1.lol</span>
</span> 
    </p>
</html>```
Tags:

2

Answers


  1. 0

    The fullscreen functionality is directly dependent on browser API and you have to use a Fullscreen API for this using some JS code. Here is an example of this:-

    <iframe id="iframeID" src="some-url"></iframe>
<button id="toggleFull">Toggle Fullscreen</button>

    Now we use a little bit of JavaScript to toggle an iframe to fullscreen.

    const togglebtn = document.getElementById("toggleFull");
const iframe = document.getElementById("iframeID");

    Then apply click handler event to the button with following conditions as:-

     togglebtn.addEventListener("click", function() {
     if(iframe.requestFullscreen){
          iframe.requestFullscreen();
     }else if(iframe.mozRequestFullScreen){ // Firefox
          iframe.mozRequestFullScreen();
     }else if(iframe.webkitRequestFullscreen){ // Chrome,Safari,Opera
          iframe.webkitRequestFullscreen();
     }else if(iframe.msRequestFullscreen){ // I.E, Edge
          iframe.msRequestFullscreen();
     }
   });

    NOTE:- Fullscreen API will trigger respective browser-specific methods to request a fullscreen for an iframe.

    Login or Signup to reply.
  2. 0

    It depends on what you mean by "fullscreen". If you want your <iframe> element to take the whole page, then use CSS to do such a thing.

    html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

iframe {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0;
}
    <iframe src="https://example.com"></iframe>

    Of course, to toggle such a thing, you need to use JavaScript.

    let iframe = document.getElementById("iframe");
let toggleButton = document.getElementById("toggleButton");

toggleButton.addEventListener("click", () => {
    iframe.style.width = iframe.style.width === "100vw" ? "50vw" : "100vw";
    iframe.style.height = iframe.style.height === "100vh" ? "50vh" : "100vh";
});
    html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#iframe {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0;
}

#toggleButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px;
  background-color: orange;
  border-radius: 5px;
  cursor: pointer;
  font-family: cursive;
  user-select: none;
}
    <iframe id="iframe" src="https://example.com"></iframe>
<div id="toggleButton">Toggle</div>

    If you want your element to take the computer’s whole screen, use the requestFullscreen() method.

    let iframe = document.getElementById("iframe");
let toggleButton = document.getElementById("toggleButton");

toggleButton.addEventListener("click", () => {
iframe.requestFullscreen();
});
    html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#iframe {
  width: 50vw;
  height: 50vh;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 0;
}

#toggleButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 12px;
  background-color: orange;
  border-radius: 5px;
  cursor: pointer;
  font-family: cursive;
  user-select: none;
}
    <iframe id="iframe" src="https://example.com"></iframe>
<div id="toggleButton">Toggle</div>

    Note: It may not work in the Stack Snippet, but it’ll work locally.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search