Responsive Iframes

Iframes that fit like a tailored suit

Iframes are fantastic, no doubt about it—they’re windows to other worlds. But sometimes, they feel like a stiff, ill-fitting suit, no matter how much you adjust or tweak them.

That’s where CSS steps in, like a skilled tailor. With the right techniques, it ensures your iframe adapts seamlessly to any screen size, as if custom-made. A few clever tricks, and your iframe will stretch and shrink gracefully, always maintaining its perfect form. Whether on a massive desktop or a tiny mobile screen, your window to other worlds stays stylish and refined.

Let’s Keep Going

Iframes responsive

A Window

That Adapts

To make an iframe responsive, you can place it inside a container with a fixed aspect ratio.

In this example, the iframe-container ensures the iframe maintains a 16:9 aspect ratio, typical for videos. The ratio is set using padding-bottom (56.25% corresponds to 16:9). The iframe is then resized to fill the entire width of the container, regardless of screen size.
Don’t worry too much about the position property yet— you’ll get to know it well when you meet the Weirdos!

HTML

<div class="iframe-container">
    <iframe src="https://www.example.com" frameborder="0" allowfullscreen>
    </iframe>
</div>

CSS

.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* For a 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

In this lesson, you have learned…

Why iframes are not responsive by default and how to make them flexible for any screen size using CSS.
How to embed an iframe inside a container with a fixed aspect ratio calculation to ensure optimal display.
Why padding-bottom: 56.25% creates a 16:9 aspect ratio and how you can adjust this value for other ratios.
Why width: 100% and height: 100% are essential to ensure the iframe fully expands, no matter the device.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Magical Portal

High atop the tower of the ancient mages floats a window – not made of glass, but of pure magic. It reveals distant worlds and whispering landscapes. Your task is to master this portal using an iframe. Ensure it remains flexible on every device by making it responsive, and bring it to life with a YouTube video. But beware: A well-crafted portal is the difference between an awe-inspiring spell and a chaotic glimpse into the broom closet!

Your Task: Embedding and Styling Iframes

Embed an Iframe:
Use the <iframe> element to embed a YouTube video. Opt for https://www.youtube-nocookie.com for a privacy-friendly integration.
Responsive Design:
Add a CSS rule to make the iframe responsive.
Tip: You’ll need to create classes and a surrounding container to make it work.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

HTML

<!-- Youtube without CSS -->
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/o1JIK5W3DRU?si=gLp-so-mNBvlGgYs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

<!-- Youtube with CSS -->
<div class="iframe-container">
    <iframe frameborder="0" allowfullscreen src="https://www.youtube-nocookie.com/embed/WhWc3b3KhnY?si=WjzAbnmVkseYr38-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>

CSS

.iframe-container {
    position: relative;
    width: 90%;
    padding-bottom: 56.25%;
    /* For a 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Let’s Keep Going