How to create Responsive iFrames using CSS ?
Last Updated :
02 Aug, 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=
"https://www.youtube.com/embed/TnV34Lfdk7k?si=gEPAYFb9CjOvFKTp">
</iframe>
</div>
</body>
</html>
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=
"https://www.youtube.com/embed/5YlR3yZV9bE?si=uk-Ej0LB6but4wDr">
</iframe>
</div>
</body>
</html>
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=
"https://www.youtube.com/embed/578Pzg7tVF4?si=ObaYQpK2h0DWfIKZ">
</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=
"https://www.youtube.com/embed/xvUopUeVS0U?si=cUVgNCFWfNFbK98s">
</iframe>
</div>
</body>
</html>
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=
"https://www.youtube.com/embed/ehXa1Hxxu3Y?si=eI-2CUYgU5rhwLDU">
</iframe>
</div>
</body>
</html>
Output:
Similar Reads
How to create a Responsive Inline Form using CSS ? When the browser window is resized, the labels and inputs will stack on top of each other for smaller screens. To create a responsive inline form using CSS, use a container with flexible styling, such as Flexbox or Grid, to arrange form elements horizontally. Utilize media queries to adjust the layo
3 min read
How to Create Responsive Sidebar using HTML & CSS ? Creating a responsive sidebar using HTML and CSS means designing a navigation menu that adapts seamlessly to different screen sizes. It provides a user-friendly experience on both desktop and mobile devices, adjusting its layout for better readability and easy access to content. PreviewApproachBasic
2 min read
How to Create Responsive Modal Images using CSS & JavaScript? Modal images provide an interactive way to display larger versions of images without navigating away from the current page and it takes user attention and users can stay on our website some more time. PreviewApproachFirst, create a basic HTML layout for your image gallery and modal pop-ups. Each ima
4 min read
How to make a HTML div responsive using CSS ? The CSS Media Query can be used to make an HTML "div" responsive. The media queries allow the users to change or customize the web pages for many devices like desktops, mobile phones, tablets, etc without changing the markups. Using the media query, the user can change the style of a particular elem
2 min read
How to create Responsive Floating Elements using CSS ? The Responsive Floating Elements are useful for adaptable layouts on different devices. It ensures a seamless user experience by adjusting the size and arrangement of cards based on the screen size. The float property is employed to arrange the cards horizontally, making them responsive on various d
3 min read