How to create a Responsive iframe with CSS?
0 2536
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>
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.
Share:
Comments
Waiting for your comments