Simply use the same CSS on the iframe:However, there is one limitation with this, you need to turn off the scrollbars with If the scrollbars are allowed, then this wont work on the iframe anymore. That said, if you modify the The problem, it seems, is that Mobile Safari will refuse to obey the width of your iFrame if the document it contains is wider than what you have specified. You should now have the following code to copy into your html.Next, we need to remove width="560" height="315" because these are here to set the size of the iframe. Play with the size of the screen to see the responsive iframe at work. So you may have to do some browser detection with JS to get around this. Most websites use YouTube videos, Google maps or other external website elements embedded in them. In each case you need to create a wrapping element and give it a certain class.In Bootstrap 3.2 and over, use the predefined class You can of course create your own modifier class. Once you are done, you should get an iframe that is responsive. Example:On a desktop browser, you will see an iFrame and a Div both set to 300px. With only a little CSS, you can have images keep their original aspect ratio whatever the size of the screen.If you do not set the width to a fixed amount, but instead you fix it to 100% with a Then your images will be responsive and keep their ratio. Instead of assuming the iFrame will scroll, place the iframe in a DIV that you do have control over and let that scroll. It appears Apple has decided that the default behavior of an iFrame is ‘no scroll’ and expands to prevent it. While creating the embed for caniuse, one part I found quite challenging was making the iframe fully responsive. We’ll use CSS to make iframe responsive. For example:If you are using Materialize CSS, then you don’t need your own classes either.
As you saw, it’s actually pretty easy and I hope I saved you hours of trying to fit your iframes on your mobile. It combines the esthetic of Material Design and the functionalities of the newest Bootstrap. Here I have a Most projects will use some kind of CSS framework to help with keeping the styling uniform throughout the project, may it be Bootstrap or Material-UI. I was able to solve it by setting the all of the images css max-width to a percent. My guess is that this is a workaround for long-standing issues with scrolling content within a page. Lastly, you saw how easy it is to fit your images in your responsive website.Let me know below in the comments what you think of the article and if you have any questions about anything above. How to get an IFrame to be responsive in iOS Safari? MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use. Just add the video-container class to your wrapper:Images are a lot easier to deal with. The iframe responsive is a very common issue, many developers face it. As you can see, the video iframe is cut-off on mobile. In the past, if you had a large scrolling iframe on a touch device, you’d get ‘stuck’ in the iframe as that would be scrolling instead of the page itself. I needed a cross browser solution. These functions are most commonly incorporated in a web page using the html iframe element and is one of the trickiest thing to make responsive.I have struggled for a long time to get my YouTube videos to keep their ratio on different screen sizes. The contents is wider so you can scroll the iFrame.On mobile safari, however, you will notice that the iFrame is auto-expanded to the width of the content. It is therefore even more important now for websites to be responsive. I can’t wait to share this trick with you in the following article.For the purpose of demonstration, this article will use a YouTube embed for our iframe. However, using width means your images can scale to larger than their original size though and you could end up with a blurry image.If you don't want your images to be larger than the original size, then use In the end, you will get responsive images, just like this one:In conclusion, in this article we have seen the CSS trick that can make your iframes responsive.