- Overview
- Transcript
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.Introduction3 lessons, 19:01
1.1Welcome to the Course!01:00
1.2Why Optimize Your Website Without AMP?12:25
1.3Overview of What We’ll Be Making05:36
2.Optimization Setup5 lessons, 40:11
2.1Optimization Checklist07:28
2.2Project Setup08:38
2.3Set Up the CSS08:20
2.4Set Up the HTML09:35
2.5Set Up the JavaScript06:10
3.Let the Optimizing Begin6 lessons, 37:58
3.1Add Lazy Loading Images and iFrames11:13
3.2Responsive iFrames Without Reflow04:17
3.3Image Gallery With Lightbox04:33
3.4Add Twitter Widgets03:58
3.5Add Carousel08:08
3.6Deployment Optimization05:49
4.Conclusion1 lesson, 04:49
4.1Checking Off the Checklist04:49
3.2 Responsive iFrames Without Reflow
Hey, welcome back to Optimize Your Website Without AMP. In this lesson, we can apply a little code to our iFrames that's gonna allow them to resize responsively, which they're not doing right now. And it's gonna happen in a way that's going to prevent page reflow. So we're gonna make sure that when the browser is calculating our page layout, it only has to do it once. And the first time, it's correct, even though all the content hasn't loaded in yet. In AMP, the way this is done is as I mentioned at the end of the last lesson, is width and height, properties are added. And then, you specify layout="responsive" and the net we use JavaScript to calculate the correct page layout. We're not gonna be using JavaScript to do this. Instead, what we're going to be doing is adding a little bit of CSS. This is a pretty cool trick and you can use this not just on iFrames, but you can use it on anything that you want to allow to resize and keep its original aspect ratio. So to make this happen, we're gonna add a little extra CSS. First, we're gonna add in a class named aspect ratio. I will go through what this code is going to do in just a second. But first, what we're going to do is wrap both of our iFrames in a div, using that aspect ratio class. Just grab that. Wrap that around, and same thing down here. Now, the reason that we have position: relative set here on our aspect_ratio class is because we're going to absolutely position the iFrame that's inside of it. And we're gonna do that with this code, targeting those child iFrames. So you see, we have the iFrame positioned at the top left corner, and we have it set to 100% height and width. These three lines right here, that make this technique work. We have the height set to 0 and the overflow is hidden. And now what we're going to do is add an amount of padding to the bottom of this parent div that represents the aspect ratio that we want this div to maintain. So we can see here that we want our width to be 1100 pixels and our height to be 600 pixels. So we want an aspect ratio of 11 by 6. Now, the way to figure out what padding to put here is to divide the height that you want by the width that you want, and then multiply it by 100 to convert it into a percentage. So 6 divided by 11 is 0.545454 repeating, so we're going to multiply that by 100, and that's gonna give us 54.54%. So we're gonna add that in, and now that little bit of code is going to ensure that this div and its containing iFrame always maintain that 11 by 6 aspect ratio. So we can actually get rid of these height and width properties now, we don't need them anymore. And if we go back to our site, you can see that that has already corrected its layout. And as we resize, now our frame scales down and scales up as required without messing up its aspect ratio. If you want to accommodate multiple different aspect ratios, then all you need to do is make multiple versions of this code that have a different amount of padding at the bottom. So, just remember that the way you figure out how much padding you need is, to divide the height by the width, then multiply it by 100 to create a percentage. So it's a really cool technique to help you with responsive functionality in your websites, and it doesn't require any JavaScript. So it puts very little load on the browser. So now, our iFrames are in pretty good shape here, and the next thing that we're going to do is set up a lightbox for our image gallery down here. Right now, we've just got each of these images linking straight through to a larger version of itself. In the out version of our site, we used amp-image-lightbox and that required us to load in a separate script on a separate HTTP request. For our gallery, we already have the JavaScript coming in, in our index.min.js file. So all we need to do is, implement it to our gallery. And that's what we're gonna be doing in the next lesson. I'll see you there.