How to make iFrame responsive in iPhone 6?

Question

I have added an iframe and it is working fine in all browsers and some devices but in iphone 6. The iframe is not responsive. It does not fit 100% of iphone screen size.

I found many solutions online but most of them showed how to make an iFrame scroll in iphone. I dont need that. I want to make it responsive and adjust according to screen size.

<div class="frame-container" style="position: relative; padding-bottom: 65.25%; padding-top: 30px; height: 0;">
<iframe id="frame" width="100%" height="1000px" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe >
</div>

I have removed the src="" in iframe in the sample above

From the screen shot it can be seen that the iframe is not responsive and a horizontal scroll appears. During loading the iframe is according to the devices viewport but once it is fully loaded the iframe takes the full width and the horizontal scroll appears.

Checking on browser stack

Answer 1

This problem is solved, simply had to apply this styling. I did an inline-css to this.

 width: 1px;
 min-width: 100%;
 *width: 100%;

Here is a link to a more detail answer