How to make iFrames responsive

This tutorial will show you how to make your iframe responsive on Squarespace 7.0 and 7.1. 

Services such as YouTube and Vimeo provide embedded code which you can copy and paste into your website.  When content is embedded from an external source, the code will include an iframe, like the example below.

<iframe src="https://www.youtube.com/embed/k3SmOJRgEjA"  width="760" height="427"  frameborder="0" allowfullscreen></iframe>

Included within the iframe is a URL pointing to the source of the embedded content.  The iframe also includes width and height attributes.

Complexity: Easy

Table of Contents

• Why Make iFrames Responsive

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Make iFrames Responsive?

• Ensures videos and embeds scale smoothly on all screen sizes

• Improves mobile usability and user experience

• Avoids content overflow and layout breakage

• Creates a clean and modern appearance

Step-by-Step: Making iFrames Responsive

Step 1: Wrap the iFrame in a Container

To make embedded content responsive, you need to add a containing wrapper around the iframe. Modify your markup as follows, by simply changing the URL parameter using the code below, and then create a code block and paste the code into it.

<div id="vidcontainer">
<iframe src="https://www.youtube.com/embed/k3SmOJRgEjA" allowFullScreen></iframe>
</div>

Step 2: Add Custom CSS

From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code and paste the following:

#vidcontainer {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

#vidcontainer iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

This CSS maintains a 16:9 aspect ratio (standard for most videos), and forces the <iframe> to scale proportionally within its container.

---

Key Takeaways

• Wrapping your <iframe> in a styled container allows it to scale fluidly.

• You can adjust the padding-bottom value for different aspect ratios (e.g., 75% for 4:3).

• Works on both Squarespace 7.0 and 7.1 with minimal code.

FAQs

Does this work for all embedded services?
Yes—YouTube, Vimeo, Google Maps, and most other iframe-based embeds.

Can I use this for multiple iframes on the same page?
Yes, just apply the same .responsive-iframe wrapper to each.

What if my embed uses a different aspect ratio?
Adjust the padding-bottom value. For 4:3, use 75%; for 21:9, use 42.85%.

---

---

Conclusion

Making iFrames responsive is essential for modern web design—especially on platforms like Squarespace that prioritize mobile-first layouts. By following this tutorial, you’ll ensure that your embedded videos and external content look great on every device.