From the course: HTML for Educators

Unlock the full course today

Join today to access over 24,700 courses taught by industry experts.

Making iFrames responsive for mobile devices

Making iFrames responsive for mobile devices - HTML Tutorial

From the course: HTML for Educators

Start my 1-month free trial Buy for my team

Making iFrames responsive for mobile devices

“

- [Instructor] Before we leave this chapter on embedding content with iframes, there is one pain point about iframes that you really need to be aware of, and that is that they tend to break pages with responsive layouts. Okay, that sounds like a lot of bad news mixed with jargon. So, let me show you what I'm talking about. I have a page called responsive.html, where I've pasted in each of the iframes that we've added from the past several movies. I'm going to preview this in my browser. Now all of the elements look fine, but if I grab the right edge of my window and start dragging it over, making the browser narrower and narrower, so it's the size, initially, of a tablet, and then go all the way down to the size of, say, a mobile phone, the SoundCloud element scales properly, but if we scroll down a little bit, you can see that all the other elements tend to bleed off the screen, and they don't scale gracefully. If we didn't do anything else, this would be the first impression many of…

Contents