Displaying an iframe in full screen to adjust to different screen resolutions and portrait mode on tablets

My latest coding project involved creating a responsive fullscreen iframe, and for the most part, it's been working really well. However, I encountered an issue with screen resolutions like 1680x1050 (check out the screenshot here). In cases like these, I want to center the iframe on the screen with a black background both above and below it. Additionally, I'd like this same effect to apply when the iframe is in fullscreen mode on a tablet held in portrait orientation.

.FullScreen {
  &-target {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20000;
    width: 100vw;
    height: 100vh;
    background: #0a0a0a;
  }

  &-button {
    cursor: pointer;
    font-size: 40px;

    &--active {
/*....
....*/
      }
    }
  }
}
<div class="mne-contentBorder js-fullscreen-target FullScreen-target">
      <div class="myEMLObj">
      <div class="EMLObj-wrapper">
          <img class="EMLObj-placeholder" src="data:image/gif;">
          <iframe class="myObject-Iframe js-Iframe" src="" name="Iframe" frameborder="0"></iframe>
      </div>
  </div>
</div>

Please ignore the white rectangle inside the iframe and focus on the black background caused by the resolution issue

Click here for a view on tablets

jqueryhtmlcssresponsive-design

Answer №1

Consider applying CSS styles to an iframe element

iframe{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
}

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

Delayed AJAX request impedes following page loading

When a user requests a report on my application, a jQuery AJAX call using .load() is made to a file that performs extensive number crunching and MySQL requests. It typically takes 5-6 seconds to load, during which .ajaxStart() and .ajaxStop() are used to d ...

ajaxjquery

Discover how to verify the existence of an image within your local system by implementing AJAX technology

I have an image located in D:\img\need.png and I need to check if it exists or not. When attempting to do so with the following code, the error method is always called. $.ajax({ url:'http://www.himansuit.com//modiyojana.jpg', ...

javascriptjqueryajaximagefile

Ensure that the floated element stretches to 100% height in order to completely fill the page

I'm working on achieving a height of 100% for the left sidebar so that it fills the page regardless of the size of the "main" div. Currently, it stops at the normal page height and doesn't expand further. Is there any way to make this work as i ...

javascriptjqueryhtmlcssheight

Is there a way to extract a particular value from a JSON URL and transfer it to a JavaScript variable?

I am looking to extract current exchange rates from a JSON URL for implementation in a webpage. Specifically, I want to retrieve a particular exchange rate (such as the US Dollar) and store it in a variable for use within a JavaScript function. Below is a ...

javascripthtmljsonvariablesurl

Tips on choosing additional (sibling) elements with CSS?

My navbar has the following structure: <ul class="nav navbar-nav"> <li class="nav-item"><a href="#services">Services</a></li> <li class="nav-item"><a href="#work">Work</a></li> <li class ...

css

Is Material UI the Answer to Responsive Typography?

In mobile designs, it's common to use smaller headline fonts. But how does Material UI make its typography responsive? The default theme defines font sizes in rems - so is it simply a matter of reducing the base font size? Or is there a way to custom ...

reactjsresponsive-designmaterial-uitypography

"Using jQuery to detect when an input has been modified to be either zero

I utilized jQuery's .on('change') event to identify any changes in the input field value. Nonetheless, when the user enters 0 in an initially empty input field, the field gets cleared and the value is considered unchanged, leading to the fol ...

jqueryevents

Is it time to initialize the document with a specific parameter?

Can someone please explain the purpose of this code snippet to me? $(function($) { $.supermodal(); }); I understand that it's similar to waiting for the document to finish loading before running supermodal. However, I'm confused about the 2n ...

javascriptjquery

Validating Forms in AngularJS: Ensuring At Least One Input Field is Not Empty

Consider the following basic HTML form: <form name="myForm" action="#sent" method="post" ng-app> <input name="userPreference1" type="text" ng-model="shipment.userPreference" /> <input name="userPreference2" type="text" ng-model="shipm ...

javascripthtmlvalidationangularjs

What is the best way to stretch an image across the entire screen using Bootstrap?

I attempted to embed the image inside a jumbotron and a container, but unfortunately, my latest attempt did not produce the desired result. Here's the code snippet that I tried: <div class="row"> <div class="full-width-div"> <div ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Even though the jQuery UI Dialog is visible, the form is being submitted in the background without any user

I'm experiencing a curious problem that is completely new to me. Within a partial view, I have added two extra buttons for the page it's being called from: <button id="editorApproveBtn" name="submitBtn" value="EditorAppove">Approve</bu ...

jqueryjquery-ui

Using ckEditor alongside periodic jQuery Ajax for multiple editors is a powerful combination for enhancing text editing

Utilizing the inline edit feature of ckEditor along with Ajax from jQuery (learned from oleq) to showcase an issue that needs addressing. This set up functions smoothly when there is only one editor involved. The process involves reading text from a file ...

jqueryajaxckeditor

In situations where there may be a duplicate, what alternative can I utilize in place of the id attribute?

I understand that almost any element in the DOM can have an "id" attribute, and I've used it to track each client in a table of clients. Although ids should not be repeated, my rows are assigned unique identifiers based on each person's "clientId ...

javascripthtml

Using jQuery AJAX to capture and modify script content before it is executed

Is it possible to intercept and modify JavaScript loaded through AJAX? I am trying to extract the script query string into variables and add them before it is executed. I wrote some code for jQuery 1.4, but it no longer works for 1.5 and was not very eff ...

jquery

Displaying a pyramid of numbers with JavaScript

Is there a way to create a pyramid number structure in JavaScript? for (i = 1; i <= 5; i++) { var k = ' '; var myspace = ''; for (j = 0; j < i - 0; j++) { k += i; myspace += ' '; } console.log(myspace + ...

javascripthtmlcssloopsuser-interface

What are the best techniques for creating a responsive UI design that adapts to all screen widths?

I created a UI by following some tutorials, but I'm facing an issue with responsiveness. When I resize the window, the UI doesn't look good or adjust properly. Here is the link to my fiddle: http://jsfiddle.net/X8HV9/1/show/ I am encountering tw ...

javascriptjquerycssjquery-mobile

Retrieving information from a dynamic dropdown menu filled using AJAX requests

I used AJAX to populate an ASP.net dropdown list and now I need to retrieve the Id to save it into the database using a C# method, specifically LINQ. Below is my webmethod: [WebMethod] public static ArrayList GetLanguageList() { ArrayList lstArrLangu ...

c#jqueryasp.net.netajax

Trouble with ion-nav-bar rendering: No content visible

I tried creating a navigation bar using ionic-nav-bar and added an h1 element with the class title, but unfortunately, it's not showing anything on the screen. Below is the code I used: <ion-pane> <ion-nav-bar class="bar-stable"> ...

htmlcssangularjsionic-framework

Methods for Hiding and Revealing a UIView with the Press of a Single UIBarButtonItem

In my iOS app, I have created a right bar button item programmatically and added it to my view controller. Additionally, I have also added a UIView to the view controller. The action for my bar button item has been set. Currently, the UIView is hidden when ...

jqueryiosobjective-cuiview

Arranging json array according to alphabetical sections in angularjs 2

In the example below, I am working with JSON data that needs to be formatted and placed in a box according to specific criteria. The data sorted in A-B should go to a particular section, and it needs to be dynamic. Despite numerous attempts, I have not bee ...

javascripthtmljsoncssangular2-routing