How to create Responsive iFrames using CSS ?
Last Updated :
09 Feb, 2024
An iframe, or inline frame, is an HTML element used to embed another document or webpage within the current document. Responsive iframes can be achieved by defining the aspect ratio, which refers to the proportional relationship between the width and height of an element. To maintain the aspect ratio we will use padding-top Property.
Syntax
To calculate the aspect ratio for 16:9 ( 9/ 16 *100 = 56.25), Use 56.25% as a value to the CSS property padding-top.
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 */
Responsive Iframe with 4:3 aspect ratio
It defines the element <iframe> and set the URL of the video that you want to embed in your project. The element class name box have the CSS property padding-top: 75%;. This percentage value is used to maintain a 4:3 aspect ratio.
Example: Illustration of Responsive Iframe with 4:3 aspect ratio.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<title>Iframe Aspect Ratio</title>
<style>
h2,
h3 {
text-align: center;
font-size: 20px;
color: green;
}
.box {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 75%;
}
.iframe-element {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>
Responsive Iframe
Aspect Ratio 4:3
</h3>
<div class="box">
<iframe class="iframe-element" src=
</iframe>
</div>
</body>
</html>
|
Output:
Output
Responsive Iframes with 16:9 aspect ratio
Define the element <iframe> and set the URL of the video that you want to embed in your project. The element class name box have the CSS property padding-top: 56.25%;. This percentage value is used to maintain a 16:9 aspect ratio.
Example: Illustration of Responsive Iframe with 16:9 aspect ratio.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Iframe Aspect Ratio</title>
<style>
h2,
h3 {
text-align: center;
font-size: 20px;
color: green;
}
.box {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 56.25%;
}
.iframe-element {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>
Responsive Iframe
Aspect Ratio 16:9
</h3>
<div class="box">
<iframe class="iframe-element" src=
</iframe>
</div>
</body>
</html>
|
Output:
Output
Responsive Iframes with 3:2 aspect ratio
It defines the element <iframe> and set the URL of the video that you want to embed in your project. The element class name box have the CSS property padding-top: 66.66%;. This percentage value is used to maintain a 3:2 aspect ratio.
Example: Illustration of Responsive Iframe with 3:2 aspect ratio.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Iframe Aspect Ratio</title>
<style>
h2,
h3 {
text-align: center;
font-size: 20px;
color: green;
}
.box {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 66.66%;
}
.iframe-element {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>
Responsive Iframe
Aspect Ratio 3:2
</h3>
<div class="box">
<iframe class="iframe-element" src=
</iframe>
</div>
</body>
</html>
|
Output:
Responsive Iframes with 8:5 aspect ratio
It defines the element <iframe> and set the URL of the video that you want to embed in your project. The element class name box have the CSS property padding-top: 62.5%;. This percentage value is used to maintain a 8:5 aspect ratio.
Example: Illustration of Responsive Iframe with 8:5 aspect ratio.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Iframe Aspect Ratio</title>
<style>
h2,
h3 {
text-align: center;
font-size: 20px;
color: green;
}
.box {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 62.5%;
}
.iframe-element {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>
Responsive Iframe
Aspect Ratio 8:5
</h3>
<div class="box">
<iframe class="iframe-element" src=
</iframe>
</div>
</body>
</html>
|
Output:
Output
Responsive Iframes with 1:1 aspect ratio
It defines the element <iframe> and set the URL of the video that you want to embed in your project. The element class name box have the CSS property padding-top: 100%;. This percentage value is used to maintain a 1:1 aspect ratio.
Example: Illustration of Responsive Iframe with 1:1 aspect ratio.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>Iframe Aspect Ratio</title>
<style>
h2,
h3 {
text-align: center;
font-size: 20px;
color: green;
}
.box {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 100%;
}
.iframe-element {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<h2>GeeksforGeeks</h2>
<h3>
Responsive Iframe
Aspect Ratio 1:1
</h3>
<div class="box">
<iframe class="iframe-element" src=
</iframe>
</div>
</body>
</html>
|
Output:
Output
Share your thoughts in the comments
Please Login to comment...