How to make iFrames responsive

Services such as YouTube and Vimeo provide embedded code that you can copy and paste into your own website. The two main ways to embed video content on a website are the HTML5 video element, which doesn’t work in older versions of Internet Explorer, and Flash, which doesn’t work on iOS devices. When you embed content from an external source, the code will include an iframe:

<iframe src="" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>

This iframe enables external content to be displayed on your website, because it includes a URL that points to the source of the streamed content. However, you’ll notice that the iframe includes width and height attributes.

To make embedded content responsive, you need to add a containing wrapper around the iframe. Your markup would be as follows:


<div id="video-container">
<iframe src="" allowFullScreen></iframe>

* change the http link to yours


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

#video-container iframe {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;

That's it!

see it in action:

p.s. If you're using Squarespace, all you have to do is putting your URL into the Embed widget. The rest will be done by the SQSP system.