How do you code a button that can make an iframe go full screen when clicked?

Question

How do you make an iframe fullscreen on button click? I've search but the ones provided only show how to make the window full screen, not iframe. Please help, I'm trying to make an embedded iframe become fullscreen on click. Thanks!

Answer 1

You will have to do two things: make the window fullscreen, and then the <iframe> to fill up the whole size.

You can make it go fullscreen with JS such as in this SO answer.

Then, to make it full size, just add a few styles, like below. What this JS script does is add a class with those styles to the <iframe>.

JS

document.getElementsByTagName("iframe")[0].className = "fullScreen";

CSS

body, html {
    height: 100%;
    margin: 0;
}
.fullScreen {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

See this partially working* example on JSFiddle.

_{*partially working because JSFiddle doesn't allow the fullscreen method because it deems it unsafe. But it should work for you.}