How to Create a Responsive Iframe with CSS

Creating an Iframe

The HTML <iframe> tag creates an inline frame for embedding third-party content (media, applets, etc.).

In this snippet, you can learn how to create a responsive iframe with CSS. First, let’s see how a simple iframe looks like and then, we'll show how to make it responsive.

Example of creating a simple <iframe> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <iframe src="https://www.w3docs.com"></iframe>
  </body>
</html>

It is by default 300x150 pixels in size. That’s why very often we use the width and height attributes to set different size of an iframe.

Next, we’ll use CSS to make the iframe responsive. Let’s try our example on Youtube. Here are the steps to follow.

Create HTML

  • Go on Youtube, click on the "share" button under the video and then "embed" it to copy the link in your HTML code. 
<iframe width="560" height="315" src="https://www.youtube.com/embed/UF8uR6Z6KLc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  • Remove the sizes defined automatically as we're going to change them.
  • Place your iframe in a <div> element, which is important for sizing the iframe. Add a class attribute to it.
  • Use the class, src, gesture, and allow attributes with the <iframe> element.
<div class="wrap-element">
  <iframe class="wrapped-iframe" src="https://www.youtube.com/embed/UF8uR6Z6KLc" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
</div>

Add CSS

  • Style the "wrap-element" class by setting the position property to "relative", the overflow to "hidden" and specifying the padding-top property. In our example, we want to keep the ratio of 56.26% (height 9 ÷ width 16) as this is the default ratio for YouTube videos. However, you are free to use other ratios as well.
  • Style the "wrapped-iframe" class by specifying its position as "absolute" and setting the top and left properties to 0 so as to position the iframe at the center of the container. Set also the width and height properties to "100%" and add a border.
.wrap-element {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}

.wrapped-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

Let’s see the complete code example and enjoy the result!

Example of creating a responsive iframe:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .wrap-element {
        position: relative;
        overflow: hidden;
        padding-top: 56.25%;
      }
      .wrapped-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
      }
    </style>
  </head>
  <body>
    <div class="wrap-element">
      <iframe class="wrapped-iframe" src="https://www.youtube.com/embed/UF8uR6Z6KLc" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
    </div>
  </body>
</html>

Use CSS Frameworks

Some CSS frameworks have predefined classes that will do exactly the same as described above, but in each case, you need to create a wrapping element to give it a certain class.

Responsive Iframe with Bootstrap

In Bootstrap 3.2 and over, you should use the predefined class "embed-responsive" and an aspect ratio class modifier like "embed-responsive-16by9", which will add padding-top with different percentages depending on the given modifier class. Then, give your iframe the "embed-responsive-item" class.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/UF8uR6Z6KLc" allowfullscreen></iframe>
</div>

But you can also create your own modifier class, like this:

.embed-responsive-10by3 {
  padding-top: 30%;
}

Example of creating a responsive iframe with the CSS Bootstrap framework:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <title>Title of the document</title>
  </head>
  <body>
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/UF8uR6Z6KLc" allowfullscreen></iframe>
    </div>
  </body>
</html>

Responsive Iframe with Materialize

With the Materialize CSS framework, all you need to do is adding the "video-container" class to the wrapper:

<div class="video-container">
  <iframe src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>

Example of creating a responsive iframe with the CSS Materialize framework:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <title>Title of the document</title>
  </head>
  <body>
    <div class="video-container">
      <iframe src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
  </body>
</html>