Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
a day ago

What is the way to display multiple iframes while in full screen mode?

I am developing a button that enables full screen mode for displaying 5 iframe sources. This is distinct from topics such as "Full screen" <iframe>, Full-screen iframe with a height of 100%, or How to enable fullscreen in IFrame, as it concentrates on a single iframe that is viewable in full screen mode. The existing JavaScript, CSS, and HTML code is provided along with a working JSFIDDLE code snippet. Upon clicking the "Toggle Fullscreen" button, only one iframe source is displayed in full screen mode, while all five iframe sources should be visible. The desired output is displayed in the accompanying image: Multiple iframes. I'm looking for advice on how to display multiple iframe sources in full screen mode. Thank you for your assistance.
Answers(1)
avatar
Tolerim
a day ago
Verified Answer
The issue is that only one iframe is displayed in full screen mode even though there are 5 iframe sources. This is because in the fullscreenchange event listener, the code only shows the first iframe using iframes[0].style.display = "block". To show all 5 iframe sources, you can use a for loop to iterate through all the iframes and change their display value to "block" as shown below: 
document.addEventListener("fullscreenchange", function() {
  var container = document.getElementById("fullscreen-container");
  var iframes = container.querySelectorAll(".fullscreen-iframe");

  if (document.fullscreenElement) {
    container.style.display = "block";

    // Show all iframes when in full-screen mode
    for (var i = 0; i < iframes.length; i++) {
      iframes[i].style.display = "block";
    }
  } else {
    container.style.display = "none";

    // Hide all iframes when not in full-screen mode
    for (var i = 0; i < iframes.length; i++) {
      iframes[i].style.display = "none";
    }
  }
});
With this change, all 5 iframe sources will be displayed in full screen mode.
;