While my iframe is responsive on both mobile and website, I am facing an issue where the content overflows (both overflow X and Y) from the width and height of the iFrame.
Here's the scenario: in the mobile view (simulated using Google Chrome to mimic display on Galaxy Note 3, Pixel, Nexus 7 etc)
https://i.stack.imgur.com/KbiTG.jpg
And here's how it should appear in the web view https://i.stack.imgur.com/jjD81.jpg
As you can see, the content is overflowing. As an Android Engineer, I'm not a frontend expert.
I have tried two solutions to make my iframe responsive:
Firstly, by wrapping it in this style:
<style>
.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 60px;
overflow: hidden;
}
.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
iframe {
width:400px;
height:600px;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
<div class="responsive-video">
<iframe src="http://localhost/html/media/html_games/test_games"></iframe>
</div>
Secondly, by using Bootstrap:
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="http://localhost/html/media/html_games/test_games"></iframe>
</div>
Both solutions make the iframe responsive on mobile and web, but not the content itself. Can someone please advise on how to make the content responsive so that mobile users don't need to scroll on the Y-axis like in the first screenshot?
.resp-container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}
.resp-iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}<div class="resp-container">
<iframe class="resp-iframe" src="https://dev-wma-051-ccwuh3zg.qreatiq.net/media/html_games/fbibekasi_games1513/" allowfullscreen></iframe>
</div>The above snippet code works fine on a browser but overflows content when viewed on mobile devices such as the Galaxy Note3 or Pixel 2.
When viewed on mobile, I have to scroll to see all the content. How can I make the content fit within the iframe? https://i.stack.imgur.com/uj78S.png