Lessons:15Length:1.7 hours
3.2 Responsive iFrames Without Reflow
It’s very common to use iFrames to load content like YouTube videos, maps, code examples, and so on. When using AMP’s custom amp-iframe element, such content is responsive, maintains its aspect ratio, and prevents page reflow. In this lesson we’ll achieve the same thing with our own iFrames via the addition of a div and a few lines of CSS.
1.Introduction
1.1Welcome to the Course!01:00
1.1
Welcome to the Course!
01:00
1.2Why Optimize Your Website Without AMP?12:25
1.2
Why Optimize Your Website Without AMP?
12:25
1.3Overview of What We’ll Be Making05:36
1.3
Overview of What We’ll Be Making
05:36
2.Optimization Setup
2.1Optimization Checklist07:28
2.1
Optimization Checklist
07:28
2.2Project Setup08:38
2.2
Project Setup
08:38
2.3Set Up the CSS08:20
2.3
Set Up the CSS
08:20
2.4Set Up the HTML09:35
2.4
Set Up the HTML
09:35
2.5Set Up the JavaScript06:10
2.5
Set Up the JavaScript
06:10
3.Let the Optimizing Begin
3.1Add Lazy Loading Images and iFrames11:13
3.1
Add Lazy Loading Images and iFrames
11:13
3.2Responsive iFrames Without Reflow04:17
3.2
Responsive iFrames Without Reflow
04:17
3.3Image Gallery With Lightbox04:33
3.3
Image Gallery With Lightbox
04:33
3.4Add Twitter Widgets03:58
3.4
Add Twitter Widgets
03:58
3.5Add Carousel08:08
3.5
Add Carousel
08:08
3.6Deployment Optimization05:49
3.6
Deployment Optimization
05:49
4.Conclusion
4.1Checking Off the Checklist04:49
4.1
Checking Off the Checklist
04:49
