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

Html – Contents of iframe not responsive

There is a webpage which shows different design according to the screen size (whenever you refresh the page after changing the screen size). I have embedded this webpage in my website. However, after embedding, it is unable to show different designs according to the screen size (even after refreshing the page).

The iframe is unable to detect the screen size or the device type. For simplicity, I have separated the iframe from my website. Here is the simplified iframe:

<iframe iframe width="770" height="1000" src="http://tanzil.net/?embed=true&defTrans=ur.jawadi" style="overflow-x:hidden; overflow-y:auto;" scrolling="no" frameborder="0"></iframe>

I have created a video to demonstrate the problem in case you are unable to understand it. In the earlier part of the video, I have shown how the webpage (that is to be embedded) behaves normally. Then, in the second part of the video, I have embedded the same webpage in an iframe and now it does not behave normally (it does not change the design according to the screen size even after refreshing the page). Is there any way I can tell the iframe the device type, or tell it behave normally (just like it was not embedded)? Is there any method to fool the iframe into thinking that it is not being embedded so that it doesn’t cause any problems?

EDIT: An answer suggests to set the width to be a percentage value, normally 100%, so that the iframe can flex in size with the parent page. Even if I do so, it does not work:

<div id="iframe-container" style="position: relative; width: 100%; height: 1000vh;">
    <iframe width="100%" height="100%" src="https://tanzil.net/?embed=true&defTrans=ur.jawadi" style="overflow-x:hidden; overflow-y:auto;" scrolling="no" frameborder="0" id="quraniframe">
    </iframe>
</div>

Response to another answer:

  1. Adding the viewport meta tag also doesn’t help
  2. The webpage I am embedding is responsive because when opened separately, no issue is faced. As soon as the webpage is embedded, the problems can be seen.
  3. The hosting server allows the content to be embedded. In fact, the webpage I am embedding is especially designed to be embedded.
  4. I have shown the testing in the video. When not embedded in the iframe, it is responsive. When embedded in the iframe, it is not responsive anymore (because it is not understanding that the iframe is being resized)
Tags:

2

Answers


  1. 0

    If the content within your iframe is not responsive, there are a few steps you can take to address this issue:

    1. Viewport Meta Tag: Ensure that your HTML document includes the viewport meta tag in the <head> section:

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      This tag ensures the browser renders the content based on the device’s width, which is crucial for responsiveness.

    2. Responsive Styles: Check if the content inside the iframe has CSS styles that define fixed widths or heights. Replace fixed sizes with percentages or use max-width: 100%; to allow the content to adjust to different screen sizes.

    3. Cross-Origin Issues: If the iframe content is from a different domain, ensure that the server hosting the content allows it to be embedded and that the content itself is designed to be responsive.

    4. Testing: Test the responsiveness by resizing the browser window. If the content adjusts accordingly, it indicates that the responsive design is working. If not, you may need to revisit the CSS styles within the iframe content.

    5. Embedding Best Practices: Consider using responsive embeds provided by frameworks like Bootstrap or media-specific embedding techniques that inherently support responsiveness.

    By addressing these points, you should be able to make the content within your iframe responsive and adapt well across different devices and screen sizes.

    Login or Signup to reply.
  2. 0

    The problem is that you have a fixed width on your iframe tag of 770, this means that the page in the iframe will always see its window size as being this width.

    You need to set the width to be a percentage value, normally 100%, so that the iframe can flex in size with the parent page. This probably then means you need to dynamically set the height of the iframe, rather than give it a fixed with.

    You might find the iframe-resizer library useful if you now need dynamic content height for your iframe.

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

Back To Top
Search