How to make iFrames responsive

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

Complexity: Easy

Services such as YouTube and Vimeo provide embedded code which you can copy and past 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>

Within the iframe includes a URL pointing to the source of the embedded content. You will also notice that the iframe includes width and height attributes.

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 created a code block and paste the code into it.

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

Also, in the Design > Custom CSS paste the css code below

#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%;
}