Я использую этот код для получения адаптивного iframe с фиксированным соотношением ширины и высоты:
<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>
Затем я создал кнопку с классом "toggle_fullscreen" и вставил этот JS, чтобы разрешить полноэкранный режим принажав кнопку:
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();
}});
Это хорошо работает, когда ширина элемента iframed больше, чем высота, но если нет, то получается, что ширина становится 100%, а элемент отображается не полностью,Я попытался немного поиграть с кодом, но не понял этого. Можете ли вы предложить лучший способ иметь адаптивный iframe (с максимальной шириной), который можно сделать полноэкранным по запросу?