Cách thực hiện - Iframe đáp ứng
Tìm hiểu cách tạo iframe phản hồi bằng CSS.
Iframe đáp ứng
Tạo iframe sẽ giữ 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ệ khung hình 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 nó. Hai tỷ lệ khung hình video phổ biến 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 cũng như cho video YouTube).
Cách thực hiện - Iframe đáp ứng
Bước 1) Thêm HTML:
Sử dụng phần tử vùng chứa, như <div> và thêm iframe bên trong phần tử đó:
Ví 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 cho padding-top
để duy trì tỷ lệ khung hình 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ụ về Tỷ lệ khung hình 16:9
.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%;
}
Hãy tự mình thử »Các tỷ lệ khung hình khác:
Ví dụ 3:2 Tỷ lệ khung hình
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio */
}
Hãy tự mình thử »Ví dụ 8:5 Tỷ lệ khung hình
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio */
}
Hãy tự mình thử »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 */
}
Hãy tự mình thử »