Craig Ralston

Web Developer

Responsive iframes

This quick guide will show you how to make your embedded iframe fully responsive.

Start by wrapping your iframe in a div and assign a class.

Though the iframe has a set width, you can use CSS positioning properties to force the element to adapt to the size of your wrapper, which will use percentages and remain responsive down to mobile.

JSFiddle