0

I am using this code for getting an adaptive iframe which has fixed ratio 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>

Then, I have created a button with class "toggle_fullscreen" and insert this JS to allow fullscreen 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();
}});

This works well when the width of the iframed element is larger than the height, but if not, what happens is that the width becomes 100% and the element is not shown in full. I tried to play a bit more with the code, but didn't figure it out. Can you suggest a better way to have an adaptive iframe (with a maximum width) which can be made fullscreen upon request?

Puzzle Prime
  • 103
  • 7

1 Answers1

0

I suggest you to use this question: Maintain the aspect ratio of a div with CSS. Use it in your example.html to make your content with fixed ratio.

mordecai
  • 55
  • 9
  • Thank you. I already have achieved this part. The issue is when I make the iframe go fullscreen. If the height is larger than the width, things go wrong. – Puzzle Prime Oct 04 '19 at 17:13