From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Responsive iframes

Responsive iframes - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Responsive iframes

“

- [Chris] Hi, I'm Chris Converse and in this episode, we'll use HTML and CSS in order to make an iFrame responsive within a web page. If you'd like to follow along with me, download the exercise files and we'll begin by opening the HTML file in the text editor. Now, once you have the HTML file open, up in the head area, you'll see a link to style.css. We'll be opening this in a moment. Inside the body area, we have an h1, an iFrame, a paragraph, and those are all inside of a main element. Now, this iFrame here is the standard iFrame code you would get from YouTube. So, what we have inside of the iFrame is a height and a width. This is what gives it the dimensions in the page. There's a few other properties in here as well. If I come over here to the browser and resize the browser, you'll notice that the iFrame doesn't change size at all. If I bring the width down smaller than the width of the iFrame, we'll get horizontal scrolling which we can see here. If I open the web browser wider…

Contents