1. Home
  2. Responsive Iframe with 4:3 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>w3wiki</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:

									
									
								

								
								

									
									
Output

									
									
								

								
							

							
							

								
How to create Responsive iFrames using CSS ?

								
								

									
									
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.

									
									
								

								
							

						


						
						

							
Similar Reads

							
							

								
									

										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....
									

								
							

							
							

								
									

										Responsive Iframe with 4:3 aspect ratio

									

										It defines the element