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.