Primitus Consultancy

View Original

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.

See this content in the original post

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.

See this content in the original post

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

See this content in the original post