Currently, I am using the following code to create an adaptive iframe with a fixed ratio for both width and height:
<div id="game-container" style="overflow: hidden; position: relative; padding-top: 60%">
<iframe style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" frameborder="0" scrolling="no" src="example.html">
</iframe>
</div>
Additionally, I have implemented a toggle fullscreen button with the class "toggle_fullscreen" and included this JavaScript function to enable fullscreen mode upon clicking the button:
var game = $("#game-container");
var FSbutton = $(".toggle_fullscreen");
var gm = game[0];
FSbutton.on('click', function(e){
if (gm.requestFullscreen) {
gm.requestFullscreen();
} else if (gm.mozRequestFullScreen) {
gm.mozRequestFullScreen();
} else if (gm.webkitRequestFullscreen) {
gm.webkitRequestFullscreen();
}});
While this setup works well when the width of the iframed content is greater than the height, it does not display correctly if the height is larger. I have tried adjusting the code without success. Could you propose a better approach to achieve an adaptive iframe with a maximum width that can still be toggled to fullscreen?