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 Image Grid using CSS?
A responsive image grid is a layout technique used to display images in a grid-like structure that adjusts dynamically based on the screen size to ensure that the grid looks good and functions well across various devices and screen resolutions. Below are the approaches to creat a responsive image gr
3 min read
How to Create a Responsive Image Gallery using CSS?
Creating a responsive image gallery using CSS is a common task in web development. A responsive gallery adjusts to different screen sizes and ensures that images look good on devices ranging from mobile phones to desktop monitors. In this article, we will explore different approaches to creating a r
3 min read
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 create Responsive Profile Card using HTML and CSS ?
In this article, we are going to create a profile card from where a user can check out the basic details of other users and connect with them through different handles as well as message the user. Approach:Set up HTML with a container div containing an image and content sections.Style the container,
5 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
How to create and use CSS Image Sprites ?
In this article, we are going to learn how we can how to create and use CSS Image Sprites.CSS Image Sprites are nothing but a way to reduce the HTTP requests from the image resources. A CSS Image Sprite is a single image file containing all images on a document page. Image sprites are advantageous s
3 min read
How to create a responsive scrollbox in CSS ?
The purpose of this article is to create a responsive scrollbar in HTML page structure using CSS.In CSS, a responsive scroll box is an interaction technique that contains text, images, or any other elements. They can be scrolled in preset directions, which allows users to scroll if the contents of t
3 min read