Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Maintaining Aspect Ratios for HTML Videos with CSS
By specifying padding of an element in percentage, we can maintain its Aspect Ratio. The aspect ratio is the ratio of image’s width to its height. The aspect ratio can also be maintained using the aspect-ratio property.
Aspect ratio for videos with the padding-top property
Use the padding-top property to set the aspect ratio of an element on a web page. Here is the CSS padding property −
The padding-bottom specifies the bottom padding of an element.
The padding-top specifies the top padding of an element.
The padding-left specifies the left padding of an element.
The padding-right specifies the right padding of an element.
The padding serves as shorthand for the preceding properties.
Aspect Ratio 16:9
To maintain the aspect ratio of videos with CSS, the code is as follows. Here, we have set 16:9 Aspect Ratio i.e., 56% set using the padding-top property −
9 by 16 i.e., 0.5625% (56.25%)
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10%;
padding-top: 56.25%;
height: 0px;
position: relative;
box-shadow: 0 0 0 20px antiquewhite;
}
iframe {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
</div>
</body>
</html>
Aspect Ratio 4:3
To maintain the aspect ratio of an element with CSS, the code is as follows. Here, we have set 4:3 Aspect Ratio i.e. 75% set using the padding-top property −
3 by 4 i.e. 0.75% (75%)
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10%;
padding-top: 75%;
height: 0px;
position: relative;
box-shadow: 0 0 0 20px antiquewhite;
}
iframe {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div>
<iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
</div>
</body>
</html>
Aspect ratio with aspect-ratio property
Use the aspect-ratio property to maintain the aspect ratio for videos on a web page −
div {
margin: 10%;
aspect-ratio: 3/2;
height: 0px;
position: relative;
box-shadow: 0 0 0 20px antiquewhite;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10%;
aspect-ratio: 3/2;
height: 0px;
position: relative;
box-shadow: 0 0 0 20px antiquewhite;
}
iframe {
position: absolute;
top: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div>3:2 Aspect Ratio is set</div>
<iframe src="https://www.youtube.com/embed/0cwk9UMLnWE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-inpicture" allowfullscreen></iframe>
</body>
</html>
332 Views
