Cách tạo: Iframe Phản hồi

Học cách sử dụng CSS để tạo iframe Phản hồi.

Iframe Phản hồi

Tạo một iframe giữ tỷ lệ Chiều rộng và Chiều cao (4:3, 16:9, v.v.) khi điều chỉnh kích thước:

Tỷ lệ Chiều rộng và Chiều cao là gì?

Tỷ lệ Chiều rộng và Chiều cao của phần tử mô tả mối quan hệ tỷ lệ giữa Chiều rộng và Chiều cao. Hai tỷ lệ Chiều rộng và Chiều cao phổ biến của video là 4:3 (định dạng video phổ biến trong thế kỷ 20) và 16:9 (định dạng TV HD và TV số châu Âu cũng như video YouTube phổ biến).

How To - Iframe Phản hồi

Bước 1 - Thêm HTML:

Sử dụng phần tử khung, chẳng hạn như <div>, và thêm iframe vào đó:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

Bước 2 - Thêm CSS:

cho padding-top Thêm giá trị phần trăm để duy trì tỷ lệ Chiều rộng và Chiều cao của khung DIV. Ví dụ sau sẽ tạo ra một khung DIV có tỷ lệ Chiều rộng và Chiều cao là 16:9, đây là tỷ lệ mặc định của video YouTube.

Mô hình - Tỷ lệ 16:9

.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* Tỷ lệ 16:9 Chiều rộng và Chiều cao (9 chia cho 16 bằng 0.5625) */
{}
/* Sau đó thiết lập phong cách cho iframe để phù hợp với độ cao và độ rộng của khung div hoàn chỉnh */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
{}

Thử ngay

Các tỷ lệ Chiều rộng và Chiều cao khác

Mô hình - Tỷ lệ 4:3

.container {
  padding-top: 75%; /* Tỷ lệ 4:3 Chiều rộng và Chiều cao */
{}

Thử ngay

Mô hình - Tỷ lệ 3:2

.container {
  padding-top: 66.66%; /* Tỷ lệ 3:2 Chiều rộng và Chiều cao */
{}

Thử ngay

Mô hình - Tỷ lệ 8:5

.container {
  padding-top: 62.5%; /* Tỷ lệ 8:5 Chiều rộng và Chiều cao */
{}

Thử ngay

Mô hình - 1:1 Tỷ lệ Chiều rộng và Chiều cao (Chiều cao và Chiều rộng luôn bằng nhau)

.container {
  padding-top: 100%; /* Tỷ lệ 1:1 rộng/xuống */
{}

Thử ngay