Cách thực hiện - Iframe đáp ứng
Tìm hiểu cách tạo iframe đáp ứng bằng CSS.
Iframe đáp ứng
Tạo iframe sẽ giữ nguyên tỷ lệ khung hình (4: 3, 16: 9, v.v.) khi thay đổi kích thước:
Tỷ lệ khung hình là gì?
Tỷ lệ co của một phần tử mô tả mối quan hệ tỷ lệ giữa chiều rộng và chiều cao của phần tử đó. Hai tỷ lệ khung hình phổ biến của video là 4: 3 (định dạng video phổ biến của thế kỷ 20) và 16: 9 (phổ biến cho truyền hình HD và truyền hình kỹ thuật số châu Âu và cho video YouTube).
Cách thực hiện - Iframe đáp ứng
Bước 1) Thêm HTML:
Sử dụng một phần tử vùng chứa, như <div> và thêm iframe vào bên trong nó:
Thí dụ
<div class="container">
<iframe
class="responsive-iframe"
src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
Bước 2) Thêm CSS:
Thêm giá trị phần trăm padding-top
để duy trì tỷ lệ co của vùng chứa DIV. Ví dụ sau sẽ tạo tỷ lệ khung hình 16: 9, đây là tỷ lệ khung hình mặc định của video YouTube.
Ví dụ 16: 9 Tỷ lệ khung hình
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
/* Then style the iframe to fit in the container
div with full height and width */
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
Các tỷ lệ khung hình khác:
Ví dụ 4: 3 Tỷ lệ khung hình
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio */
}
Ví dụ 3: 2 Tỷ lệ khung hình
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio */
}
Ví dụ 8: 5 Tỷ lệ khung hình
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio */
}
Ví dụ 1: 1 Tỷ lệ khung hình (Chiều cao và Chiều rộng luôn bằng nhau)
.container {
padding-top: 100%; /*
1:1 Aspect
Ratio */
}