javascript - ventana - ¿Cómo hacer un iFrame para ir a pantalla completa con un clic de botón?

video flotante html

Question

Me gustaría hacer que el iFrame aparezca en pantalla completa con un clic de botón usando JavaScript.

<iframe id="iframe_view" class="embed-responsive-item container well well-small span6" style="height: 720px; width: 1280px; background-color: #2e2e2e;" src="https://www.google.com/" frameborder="0" scrolling="no" allowfullscreen>

Answer 1

Tendrá que hacer dos cosas: hacer que la ventana sea de pantalla completa y luego <iframe> para llenar el tamaño completo.

Puede hacer que se visualice en pantalla completa con JS, como en esta respuesta SO .

Luego, para hacerlo de tamaño completo, solo agregue algunos estilos, como a continuación. Lo que hace este script JS es agregar una clase con esos estilos al <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;
}

Vea este ejemplo parcialmente funcional * en JSFiddle.

_{* parcialmente funcionando porque JSFiddle no permite el método de pantalla completa porque lo considera inseguro. Pero debería funcionar para ti.}