The aspect ratio of an element describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3 (the universal video format of the 20th century),
and 16:9 (universal for HD television and European digital television, and for YouTube videos).
Add HTML
<!DOCTYPE html>
<html>
<head>
<title>Responsive Iframes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="main">
<div class="main-container">
<iframe src="https://www.youtube.com/embed/VFL-bn7Y0k4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
</div>
</div>
</body>
</html>
Add CSS
Add a percentage value for
padding-top to maintain the aspect ratio of the container DIV.<style type="text/css">
.main-container {
width: 50%;
margin: auto;
border: 1px solid green;
padding-top: 30%;
position: relative;
}
.main-container iframe{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
</style>
Different Aspect Ratio's
padding-top: 56.25%; 16:9 Aspect Ratio
padding-top: 75%; 4:3 Aspect Ratio
padding-top: 62.5%; 8:5 Aspect Ratio
padding-top: 100%; 1:1 Aspect Ratio
Complete Code
<!DOCTYPE html>
<html>
<head>
<title>Responsive Iframes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style type="text/css">
.main-container {
width: 50%;
margin: auto;
border: 1px solid green;
padding-top: 30%;
position: relative;
}
.main-container iframe{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
</style>
<body>
<div class="main">
<div class="main-container">
<iframe src="https://www.youtube.com/embed/VFL-bn7Y0k4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe>
</div>
</div>
</body>
</html>
0 Comments