Duy trì tỷ lệ khung hình cho Video HTML với CSS

Giới thiệu

Bằng cách chỉ định padding của một phần tử theo phần trăm, chúng ta có thể duy trì tỷ lệ khung hình (Aspect Ratio) của nó.

Sử dụng thuộc tính CSS padding:

• padding-bottom chỉ định padding dưới của phần tử.

• padding-top chỉ định padding trên của phần tử.

• padding-left chỉ định padding trái của phần tử.

• padding-right chỉ định padding phải của phần tử.

• padding là viết tắt cho các thuộc tính trên.

Ví dụ 1: Tỷ lệ 1:1 (vuông)

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#demo { 
  padding-top: 100%; 
  box-shadow: 0 0 24px steelblue; 
  position: relative; 
  width: 100%; 
} 
div > div { 
  margin: 10px; 
  position: absolute; 
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0; 
  text-align: center; 
} 
</style> 
</head> 
<body> 
<p>Watch the below div</p> 
<div id="demo"> 
<div>Fun Ratio!</div> 
</div> 
</body> 
</html>

Kết quả

Đoạn mã trên sẽ cho kết quả sau:

Dù thay đổi kích thước cửa sổ, tỷ lệ khung hình vẫn giữ 1:1.

Ví dụ 2: Video YouTube tỷ lệ 16:9

<!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-in-picture" allowfullscreen></iframe> 
</div> 
</body> 
</html>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: