Hướng dẫn Làm cho iframe có khả năng thích ứng trong html

Để nhúng iframe hiển thị tốt (responsive) trên mọi thiết bị, giải pháp tối ưu là bọc iframe trong một thẻ div cố định tỷ lệ khung hình hoặc sử dụng thuộc tính CSS aspect-ratio. Cách này giúp khung hình tự co giãn theo chiều rộng màn hình nhưng vẫn giữ nguyên tỷ lệ gốc.

Mối quan tâm chính của tôi là khi độc giả truy cập blog của tôi trên iPhone, tôi không muốn mọi thứ đều có chiều rộng x (100% cho toàn bộ nội dung) và sau đó iFrame hoạt động không đúng cách, trở thành phần tử duy nhất rộng hơn (và do đó nhô ra khỏi tất cả nội dung khác - bạn hiểu ý tôi chứ?).

Hướng dẫn nhúng iframe có khả năng hiển thị tốt trên các thiết bị khác nhau?

Có ai biết tại sao nó không hoạt động không?

1. Phương pháp dùng tỷ lệ khung hình (Aspect Ratio CSS)

Đây là cách phổ biến và gọn gàng nhất. Bạn sử dụng CSS để khóa tỷ lệ khung hình và thiết lập chiều rộng tự động.

.wrapper {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background: #ffffff;
}

.h_iframe {
  position: relative;
}

.h_iframe .ratio {
  display: block;
  width: 100%;
  height: auto;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <div class="h_iframe">
    <!-- a transparent image is preferable -->
    <img class="ratio" src="http://www.brightontheday.com/wp-content/uploads/2013/07/placeholder300.png" />
    <iframe frameborder='0' height='465px' width='470px' scrolling='no' src='http://currentlyobsessed.me/api/v1/get_widget?wid=30&blog=Brighton+The+Day&widgetid=38585' frameborder="0" allowfullscreen></iframe>
  </div>
</div>

2. Phương pháp dùng thuộc tính aspect-ratio hiện đại

Nếu trình duyệt của người dùng được cập nhật mới, bạn có thể áp dụng trực tiếp thuộc tính CSS aspect-ratio mà không cần dùng padding phức tạp.

.iframe-responsive {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Tự động giữ tỷ lệ khung hình */
    border: none;
}