responsive iframe

One time I found a WP plug-in that did a responsive iframe that fitted the height. I can't find it again now, but it shows that it's possible. I used it to embed faucetinabox into a WP page and it worked, looked like part of the site, no scrollbars etc. [edit: Found it again and added to the plug-ins page of clickforafrica wiki.]

In the end, I have used <iframe src="https://solusvm.virmach.com/login.php" style="position: absolute; top:0; left: 0; width: 100%; height: 200%;"></iframe> because I still can't find the way to just make it fit the height. I tried putting it in a position:relative; div but that produced a narrow div instead of using full page width - maybe a WP strangeness.

This worked for bittube videos:

<div class="resp-container">

    <iframe class="resp-iframe" src="https://bit.tube/playerembed/38175/QmWX8ekjUm64hfvchE6KY1zoxixaAduhqhu24778zsT793" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>

</div>

and css:

<style type="text/css"> 

.resp-container {

    position: relative;

    overflow: hidden;

    padding-top: 56.25%;

}

.resp-iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 0;

}

</style>

https://blog.theodo.fr/2018/01/responsive-iframes-css-trick/

For the purpose of demonstration, this article will use a YouTube embed for our iframe. First, go on YouTube, click on ‘share’ under the video and then ‘embed’. You should now have the following code to copy into your html.

Next, we need to remove width=”560″ height=”315″ because these are here to set the size of the iframe. Since we are going to be setting the size ourselves, this is unnecessary for our purposes.

Using CSS

Afterwards, we need to wrap the iframe in another html element like a <div>, this is very important as this element will be sizing your iframe. Then add a CSS class to your new wrapping element and one class to your iframe as seen below.

Define your wrapper class with the following style:

• position: relative The position of both the wrapper and the iframe is very important here. We are setting it to a position: relative so that we can later position our iframe in relation to the wrapping element. This is because in CSS, position: absolute positions the element based on the closest non static parent element.
• overflow: hidden is there to hide any elements that might be placed outside of the container.
• padding-top: 56.25% This is where the magic is. In CSS, the padding-top property can receive a percentage, this is what keeps our iframe to the right ratio. By using percentage, it will calculate the padding to use based on the width of the element. In our example, we want to keep the ratio of 56.26% (height 9 ÷ width 16) because this is the default ratio for YouTube videos. However, other ratios can be used as well.

Define your iframe class as follows:

• position: absolute; This will give the iframe a position relative to the wrapper and let it be positioned over the padding of the wrapper.
• top: 0 and left: 0 are used to position the iframe at the center of the container.
• width: 100% and height: 100% make the iframe take all of the wrapper’s space.

This one, I could not get to work, but worth a look again sometime maybe.

https://benmarshall.me/responsive-iframes/

Responsive IFrames Using CSS

In “Resize Videos Proportionally“, we learned how to use the intrinsic ratio technique to make your embedded videos responsive. We’ll use that same method and apply it to make any iframe, YouTube & Vimeo video or Google Map responsive. Only dependency is you know the aspect ratio (width x height) of the iframe.

When embedding iframes for content such as videos, most services like YouTube and Vimeo will provide you a snippet of code like the one below:

Notice I removed the frameborder attribute. If you’re using HTML5, that attribute is no longer supported.

The Code

First of all, remove the width and height attributes. Keeping those attributes forces the content to stay at that size regardless of the screen size. This causes problems in responsive layouts when the screen size is smaller than the width of the iframe. Though we could use CSS to force the size, why have them if their not being used — less code is beautiful code.

Next, let’s add a container with a class around the iframe:

Now, we add a little touch of CSS magic to make the iframe responsive. Same way we did in the “Resize Videos Proportionally with Intrinsic Ratios”.

IMPORTANT: Don’t forget to apply a aspect ratio class to your iframe. If you don’t, it could cause the iframe to disappear.

That it! Simple, huh? Your iframe should now proportionally resize based on the browser size. Here’s a breakdown of how it works:

Breaking It Down

• It’s key to specify the container’s position to be relative. This allows us to absolutely position the iframe within it, which is needed to make it responsive.
• The padding-bottom value is calculated based on the aspect ratio of your content. Instead of adding it to the intrinsic-container class, we added separate classes that can be appended to that element depending on the type of content you’re embedding. I prefer doing this so I’m not duplicating the container code for different aspect ratios. To find the aspect ratio of a container, use this formula: height ÷ width = aspect ratio
• height is set to 0 because padding-bottom gives the iframe it’s height.
• Using overflow: hidden is important because it ensures if any content does protrude outside of the container, it will be hidden and avoid screwing up the sites layout.
• Like with most absolute positioned elements, we need to set the top and left properties so the iframe get’s put in the right place.
• Finally, width and height are set to 100% so the iframe takes up 100% of the containers space.

Using SASS?

If you’re using SASS, use this function to find the ratio or padding-bottom of the parent container:

Taking that one step further, you can create a mixin to generate ratio classes:

We can use this same technique to make other types of embedded content responsive like Google Maps & Calendars. Basically, anything that uses a iframeusing only CSS! If you don’t have access to edit the site stylesheets directly, here’s a nifty tool that will generate responsive embed codes for you.

Use css in preference to all those other things that use javascript etc.