There is one little secret about iFrames: They tend to break responsive webpages when displayed on mobile devices. But don't despair, author Chris Mattia has found a great tool to convert your iFrame code into a responsive and mobile-friendly format that your students will love working with.
- [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 your learners would have of your pages,…
- Coding a site, a page, or parts
- Managing digital assets
- Formatting headings and paragraphs
- Creating links to pages
- Linking to a PDF or a Google Doc
- Inserting your own images into an LMS
- Embedding YouTube, Vimeo, and SoundCloud media
- Making pages responsive for mobile devices
- Working with CSS using web developer tools
- Overriding existing CSS
- Setting up your own domain
- Using FTP
Skill Level Intermediate
WordPress for Education: Multisitewith Chris Mattia1h 55m Intermediate
Measuring Learning Effectivenesswith Jeff Toister47m 4s Beginner
1. Web Basics
2. Semantically Formatting Text
3. Leveraging Links
4. Integrating Images
5. Embedding Resources
6. Adding Style with CSS
7. Setting Up Web Infrastructure
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.