Html Question posted in
Some basic documentation can be found here.

Html – Relatively adapting size of iFrame depending on mobile window size

I embed an IFrame into my html file. The external webpage represents a canvas with a width of 1000px and a height of 480px, see below.

My IFrame looks like this (i use tailwindcss)

  <div class="relative flex w-[1005px] h-[490px] border-1" id="iframe-container">
    <iframe
      id="responsive-iframe"
      src="<external webpage url>"
      class="w-full h-full"
      allowfullscreen
    ></iframe>
  </div>

When i view my canvas that is embedded in my iframe in mobile view, you can see, that it is too big for the page (see first image). I want that the content of the iframe is always fully visible (see image2) but i don’t know how to do that

enter image description here

However, it should look like this
enter image description here

I tried a few approaches like decreasing the size via javascript and having 100% width and height but it still does not show what I want.

My external webpage looks like this. Inside the preview div container, a canvas of the size 1000x480px will be inserted

<!DOCTYPE html>
<html>
  <head>
    <script src="./assets/phaser/phaser.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        /* width: 100%; */
        /* height: 100%; */
      }

      #preview {
        width: fit-content;
        height: fit-content;
      }

      .testing {
        width: fit-content;
        height: fit-content;
        border: 1px solid red;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>

  <body>
    <div class="testing">
      <div id="preview" name="preview"></div>
      <script type="module" src="start.js"></script>
    </div>
  </body>
</html>
Tags:

2

Answers


  1. 0

    Use a wrapper div to maintain the aspect ratio of the iframe by adjusting the available height of the wrapper when the width is adjusted to fit different screen sizes.

    Use max-width and max-height to set the maximum dimensions on desktop. On a phone, we don’t want these dimensions to take place as the iframe will not fit within the window width, so using max-height and max-width will allow these dimensions to adjust to fit the screen width.

    Then, padding-top: 48% maintains the iframe’s aspect ratio as its width is reduced. This is calculated by 1000px / 480px = 48%.

    Inside the wrapper, let the iframe fill the available space. This keeps it fully visible within the screen width at all times, as the wrapper won’t exceed the window width.

    .iframe-wrapper {
  position: relative;
  width: 100%;
  max-width: 1005px;
  max-height: 490px;
  padding-top: 48%;
  overflow: hidden;
  margin: auto;
}

.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="flex items-center justify-center min-h-screen bg-gray-100">
  <div class="iframe-wrapper">
    <iframe id="responsive-iframe" src="<your link>" allowfullscreen></iframe>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    With talwind you can try:

    <div class="relative flex justify-center items-center max-w-full max-h-full overflow-hidden border border-gray-300" style="width: 1000px; height: 480px;">
  <iframe
    id="responsive-iframe"
    src="<external webpage url>"
    class="w-full h-full"
    style="aspect-ratio: 5 / 2;"
    allowfullscreen
  ></iframe>
</div>

    With these changes, the iFrame should stay proportional within the container while being responsive. This setup should prevent unwanted overflow and maintain the 1000×480 aspect ratio on any screen size.

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search