Big Business Solutions for Small Business Budgets

Quick CSS/ HTML Trick: Responsive iframes

With more people browsing websites on mobile devices, it is important to have a responsive layout for both mobile browsing and desktop browsing. It is also important for all media to be responsive, including making responsive iframes, otherwise they will bleed over into the right sidebar or become cut off when the browser is resized to a width that is smaller than what is defined in the iframe.

iframes are not responsive on their own. But, with a little help from CSS, you can make responsive iframes without relying on plugins that can slow down your website.

Below is an example of a video, embedded using the iframe code provided via the video’s share button:

And here is the same video, embedded using the same iframe code but also making use of some CSS:

 

If you are viewing this post on a mobile device with a screen width less than 640 pixels, the first video is probably cut off, while the second fits your screen. If you are viewing this post on desktop, then make the browser smaller. Eventually, the top video will get cut off, while the bottom video automatically resizes to fit the width of the content container.

How do you do this? The first thing you’ll need to do is add the following to your website’s CSS:

.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}

.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Then, when you embed the iframe, intead of:

<iframe src=”https://screen.yahoo.com/weird-al-yankovic-handy-parody-133702425.html?format=embed” width=”640″ height=”360″ frameborder=”0″ scrolling=”no” allowfullscreen=”allowfullscreen”></iframe>

You would have this:

<div class=”videoWrapper”><iframe src=”https://screen.yahoo.com/weird-al-yankovic-handy-parody-133702425.html?format=embed” width=”640″ height=”360″ frameborder=”0″ scrolling=”no” allowfullscreen=”allowfullscreen”></iframe></div>

The <div class”videoWrapper”></div> will work with anything you are able to embed with iframes, such as PDFs, thought it will change the aspect ratio.

Examples embedding a PDF:

Non-responsive:

<iframe src=”https://skookummonkey.com/wp-content/uploads/2014/07/Five-Little-Zombies-And-Fred-interior-preview.pdf” width=”700″ height=”700″ frameborder=”0″ scrolling=”no” allowfullscreen=”allowfullscreen”></iframe>

Responsive:

<div class=”videoWrapper”><iframe src=”https://skookummonkey.com/wp-content/uploads/2014/07/Five-Little-Zombies-And-Fred-interior-preview.pdf” width=”700″ height=”700″ frameborder=”0″ scrolling=”no” allowfullscreen=”allowfullscreen”></iframe></div>

 

Skookum Monkey can design your custom mobile-friendly responsive WordPress theme today.

Leave a reply