How to create a Responsive iframe with CSS?

0 2609

In this tutorial, I will explain how to create a responsive iframe with the help of CSS. iframe (short form of inline frame) is an HTML tag, which is used to embed the external web-page to the HTML document. These iframes can be inserted anywhere on the web-page.

With the code's help explained below, I am explaining how this iframe can be used to embed videos from other sites. Here is an example I am using a sample video from our youtube channel.

While creating responsive iframes, I important thing which one should keep in mind is the aspect ratio. The aspect ratio is the property of a video that describes the proportional relationship between width and height. Different video sources have a different aspect ratio. I am providing some of the popular ratios for quick reference.

Let's look at the sample code first.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Responsive Iframe with CSS</title>
    <style>
      .main-div h1
       {
        font-size: 21px;
        }
      .div-element {
        position: relative;
        overflow: hidden;
        padding-top: 56.25%;
      }
      .responsive-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 50%;
        border: 0;
      }
</style>
  </head>
  <body>
    <div class="main-div">
   <h1> Responsive Iframe with CSS </h1>
<div class="div-element">
 <iframe class="responsive-iframe" src="https://www.youtube.com/embed/9StHwCH9l0s"; autoplay; encrypted-media; allowfullscreen"></iframe>
</div>
   </iframe>
  </div>
  </body>
</html>

Execute

Output:

Here you can see that in defining the DIV element I am declaring "padding-top: 56.25%' this value of the padding-top property is equivalent to the aspect ratio of 16:9. This ratio is standard for youtube videos.

Here is the other popular format. Try it yourself to see the other aspect ratios also.

padding-top: 56.25%;   /* 16:9 aspect ratio */
padding-top: 75%;      /* 4:3 aspect ratio */
padding-top: 66.66%;   /* 3:2 aspect ratio */
padding-top: 62.5%;    /* 8:5 aspect ratio */
padding-top: 100%;     / * 1:1 aspect ratio */

I hope you have understood how to create a responsive iframe using CSS and customize the aspect ratio as per your requirement.

Please leave a comment if you find this blog useful. Do subscribe to our website for more solutions.