Skill Level Intermediate
- [Instructor] Hi, this is Chris Converse, and in this episode we'll use HTML and CSS to create an iFrame that will continually resize in proportion within your webpage. Now, unlike some media elements, iFrames have no inherent sizes, and that means the browser relies on the measurements specified in either HTMl or CSS. So we'll start by calculating a ratio for the iFrame then we'll use that measurement to dynamically resize the iFrame in our webpage. Now, if you'd like to follow along with me, download the exercise files and let's open the indexed at HTML file in a text editor.
Now with the HTML file open you can see down here inside of the article element I have an iFrame here that we got from YouTube. And to preview what we're starting with you can open this indexed at HTML file up in a browser. So, inside of the HTML, the first thing that we're going to want to do is get rid of some of these properties because we're going to be controlling some of the iFrame properties with CSS. So the first thing we'll do is come in here and get rid of the height and the width, and let's also come down here and get rid of the frame border.
So the only attributes we'll have will be, allow full screen, and, the source. Now let's come in here before the iFrame and let's add a div, this is going to be our main container. So, less than sign, type div, then we'll end the tag. Next let's get our cursor after the iFrame, and let's end that outer div container element. Now let's get our cursor inside the beginning div tag, let's come in here and add a class, and we'll name this, responsive iFrame, and then inside of this div we're going to add another div element, so there's going to be two items inside of the main responsive iFrame container.
Another div, and our iFrame. So, less than sign, let's type in div, let's end that tag, and then we'll end the element, and now inside of this particular div element we're going to add an in-line style. So type, style equals, two quotes, and the property's going to be padding bottom, and now in order to figure out the value of padding bottom, we're going to need to calculate the ratio. So to do that we'll start with the original size, which is 560 by 315, we'll take the height of 315, we'll divide that by 560, which will give us 0.5625, so we'll move the decimal place two points over giving us 56.25, and that will be the percentage of the height compared to the width.
So now, back in the HTML file, where we're specifying the in-line style of padding bottom, let's set this to 56.25 percent, then a semicolon, and then if you preview this in a browser you'll see the changes that we've made so far taking effect. The iFrame is now being sized to the default size of the browser, and we now see that we have 56 percent of the height of that overall container as negative space here at the top. So back in the HTML, I'm just going to clean up my code a little bit, then we'll save the HTML, let's go back to the exercise file, let's find style.css, let's open that up in our text editor, let's scroll down to the bottom, I'll add a few lines here, and after the anchor tag selector, let's come in here and create a rule that will target the responsive iFrame container.
So I'll type .responsive iFrame to target that class, let's come in here and add our brackets, so we're going to set the width of the main container to 100 percent, add a semicolon, and then second thing we're going to do is set a position value of relative. So, position, relative. Now we're setting this up because we're going to absolute position the iFrame, and we want to make sure that the iFrame positions itself in relation to this main container.
So now in the next line, we're going to target the responsive iFrame again, then a space, then we're going to target the iFrame element that's inside, let's put in our brackets, let's split this open, and the first property is going to be the border, we're going to set that to none, since we got rid of the frame border attribute earlier. And then next, we're going to set the width property to 100 percent. Next line, we're going to do the same thing for height, we're going to set the height to 100 percent as well.
And then if you preview this in a browser, you'll see more of these changes taking effect, and so the last thing we need to do is set some absolute positioning properties on the iFrame element. So in the next line, we'll add position, set this to absolute, so we'll set a left position property of zero, and a top position property of zero. And now with these properties in place, save your CSS, go back to the browser, hit reload, and now when you resize the browser you'll see that the iFrame will continually resize in proportion, based on the width of the browser.
So at this point you might be wondering, why does this work, the main div container can be sized to any width, the internal div, with the padding bottom, calculates its height based on the width of its parent. This is how height percentages work in CSS, they're calculated based on the width of the parent. So with the percentage amount matching the aspect ratio of the content in the iFrame, the iFrame will continue to resize in proportion. So once you have this working, be sure to keep your code and use it anytime you need your iFrames to be responsive.
And so with that, I'll conclude this episode, and as always, thanks for watching.