How to Make an iframe Responsive

Apr 29, 2018 | Errors and Troubleshooting

Before we discuss how to make an iframe responsive, let get to know what is an iframe. In simple words, an iframe is an HTML document on your website that is embedded inside another document.
Many people use mobile phones to surf the web. This makes it important that the website should be responsive. Most sites use Google maps, YouTube videos and other site elements embedded in them.

How to Make an iframe Responsive

Sometimes making iframe responsive is a tricky thing. Here are few tricks.

How to make YouTube iframe responsive using CSS and CSS Framework

The iframe can be made responsive using CSS and CSS frameworks for YouTube videos.

Using CSS

Here are some responsive iframe CSS tricks to make your website responsive. Wrap the iframe in HTML code like <div>. Then add CSS class to the wrapping element and another class to the iframe. Some of the frameworks like Bootstrap and Material-UI have predefined classes.

<div class=”container”>

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/kw4tT7SCmaY” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>

</div>

Define the wrapper class

.container {

    position: relative;

    overflow: hidden;

    padding-top: 56.25%;

}

  • We set the position relative to position the iframe around the wrapping element later.
  • To hide the elements outside the container we set overflow hidden.
  • To keep the iframe in exact ratio put padding 25% ( width 16: height 9 ) as this is the default ratio on YouTube. But other ratios can also be used.
Now define the iframe class

.iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border: 0;

}

  • Position absolute is used to the position over the padding of the wrapper and it will give iframe relative position to the wrapper.
  • To position the iframe in the center of the container we use top 0 and left 0.
  • To consume all the wrapper’s space we use width 100% and height 100%.

How to make iframe responsive using Bootstrap

Bootstrap is CSS framework. We can make iframe responsive using bootstrap. Use the predefined .embed-responsive class and the aspect ratio modifier class like .embed-responsive-16by9.

<div class=”embed-responsive embed-responsive-16by9″>

  <iframe class=”embed-responsive-item” src=” https://www.youtube.com/embed/kw4tT7SCmaY ” allowfullscreen></iframe>

</div>

There are different aspect ratios you can use.
  1. .embed-responsive-1by1
  2. .embed-responsive-4by3
  3. .embed-responsive-16by9
  4. .embed-responsive-21by9
You can also create your modifier class. e.g.

.embed-responsive-10by3 {

   padding-top: 30%;

}

Using Material-UI

As in materialize, CSS classes are predefined. We just need to create a container class to the wrapper.

<div class=”video-container”>

<iframe src=”https://www.youtube.com/embed/kw4tT7SCmaY” frameborder=”0″ allowfullscreen></iframe>

</div>

Using JavaScript

Using javascript, the responsive iframe can be made.

<html lang=”en” class=”no-js”>

   <head>

      <meta charset=”utf-8″>

      <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

      <style>

      html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden; font-family: arial; font-size: 10px; color: #6e6e6e; background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style>

      <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>

      <script>

         var calcHeight = function() {

           $(‘#preview-frame’).height($(window).height());

         }

         $(document).ready(function() {

           calcHeight();

         });

         $(window).resize(function() {

           calcHeight();

         }).load(function() {

           calcHeight();

         });

      </script>

   </head>

   <body>

      <iframe id=”preview-frame” src=”https://fixmysitepro.com/” name=”preview-frame” frameborder=”0″ noresize=”noresize”>

      </iframe>

   </body>

</html>

Before using this code on your website, first replace these:
  • Replace #preview-frame with your iframe id.
  • And also replace the URL with your domain URL in the body section.

Responsive iframe Trouble You?

Every developer has faced this problem if you are having trouble fixing it feel free to contact. Simply, click the button below.

Using SASS

Use this code to find the ratio of the parent container if you are using SASS.

/**

 * Ratios

 * Returns the ratio for specified dimensions.

 */

@function ratio($width, $height) {

  return percentage( $height / $width);

}

To generate ratio class create mixin.

@mixin generateRatios($width, $height, $prefix: “ratio-“) {

  $class-name: $prefix + $width + “x” + $height;

  .#{$class-name} {

    padding-bottom: ratio($width, $height);

 }

  // Output example: .ratio-16×9 {}

}

 

@include generateRatios(16,9); // 16×9

@include generateRatios(4,3);  // 4×3

This technique can also be used to make other embedded content like calendar and Google maps responsive.
How to make iframe Responsive Calendar
The iframe responsive calendar can be fixed using CSS. Its aspect ratio will be different from the other content so we have to make the changes accordingly.

<div>

    <iframe src=”https://www.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&amp;color=%232952A3&amp;ctz=Europe%2FLondon” style=” border-width:0 ” width=”800″ height=”600″ frameborder=”0″ scrolling=”no”>

    </iframe>

</div>

Now style this div and add a class of .calendar-container to it.

.calendar-container {

    position: relative;

    padding-bottom: 75%;

    height: 0;

    overflow: hidden;

}

In this code, the aspect ratio is 4:3. So, add the bottom padding 75%. And also style the iframe is this container.

.calendar-container iframe {

    position: absolute;

    top:0;

    left: 0;

    width: 100%;

    height: 100%;

}

This is the same process that we have done for video. In calendar it has two exceptions, top padding is not required and different aspect ratio is will be used.

How to make iframe Responsive Google map

Rather than video and calendar responsive embed Google map also face this problem. We use the same ratio technique and we divide the height by width when setting the bottom padding.

<div class=”google-maps”>

<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804″ width=”500″ height=”450″ frameborder=”0″ style=”border:0″></iframe>

</div>

Now add this in the style and style the iframe

.google-maps {

    position: relative;

    padding-bottom: 90%; // (450 ÷ 500 = 0.9 = 90%)

    height: 0;

    overflow: hidden;

}

.google-maps iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

How to make iframe Responsive Images

Images are very easy to handle. Using CSS we can make full-screen iframe responsive images.

image {

    width: 100%;

    height: auto;

}

This will help your image to be responsive but by putting the width 100% makes your image larger than its original size and you will have a blurry image.
Use max width to keep your image in original size

image {

    max-width: 100%;

    height: auto;

}

With this you will have a responsive image.

Conclusion

In this article, we have discussed some tricks on how to make an iframe responsive using CSS and CSS frameworks. By adding these simple codes to the iframe can make your site responsive. We have also looked at some other solutions using JavaScript and SASS.
I hope the above-mentioned solutions will help with your problem. If you still facing a problem or have other problem then this feel free to contact us at https://fixmysitepro.com/

Responsive iframe Troubles You?

Every developer has faced this problem if you are having trouble fixing it feel free to contact. Simply, click the button below.