How to Create a Responsive Iframe with CSS

The <iframe> is an HTML tag that creates an inline frame for embedding third-party content (media, applets, etc.). In this snippet, we will learn how to create a responsive iframe using CSS. Firstly, let’s see how a simple iframe looks like. Here’s an example:

Example of 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 a different size of an iframe. But now we’ll use CSS to make the iframe responsive. Let’s try our example on Youtube. Here are the steps to follow:

1. Create HTML

  • Go on Youtube, click on the "share" button under the video and then "embed" it in order 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 will change them.

2. Use CSS

  • Place your iframe in an HTML <div> element which is important for sizing the iframe.
  • Give a CSS class to the wrapping element <div> and one class to the iframe inside of it.
    <div class="wrap-element">
      <iframe class="wrapped-iframe" src="https://www.youtube.com/embed/UF8uR6Z6KLc" gesture="media"  allow="encrypted-media" allowfullscreen></iframe>
    </div>
  • Give the following style to the class of wrapper <div>
    1. Set the CSS position property to "relative", so that you can later position your iframe in relation to the wrapping element.
    2. Set the CSS overflow property to "hidden" to hide any elements placed outside of the container.
    3. Set the CSS padding-top property to "56.25%". This will provide the right ratio of the iframe. 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.
    .wrap-element {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    }
  • It’s high time we defined a class for the iframe. Here are the styles needed:
  1. Define the position property to "absolute", which will make the iframe position relative to the wrapper and let it be positioned over the padding of the wrapper.
  2. Define the top property to "0" and "left": they are used to position the iframe at the center of the container.
  3. Define the width and the height properties to "100%" to make the iframe take all of the space of the wrapper.
.wrapped-iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

Now, we are done. Let’s see the complete code example and enjoy the result!

Example of 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>

3. 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 the 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 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>
    <style> 
    </style>
  </head>
  <body>
    <div class="embed-responsive embed-responsive-16by9">
      <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/UF8uR6Z6KLc" allowfullscreen></iframe>
    </div>
    </div>
  </body>
</html>

Responsive Iframe with Materialize

With 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 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>
    <style> 
    </style>
  </head>
  <body>
    <div class="video-container">
      <iframe src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
    </div>
    </div>
  </body>
</html>

Do you find this helpful?

Related articles