Bootstrap: Thành phần nhúng responsive

Thành phần này cho phép các trình duyệt xác định kích thước của video hoặc slideshow dựa trên chiều rộng của block chứa chúng bằng cách tạo ra một tỷ lệ mà có thể thay đổi một cách thích hợp trên các loại thiết bị khác nhau.

Các quy tắc được áp dụng trực tiếp trên các phần tử <iframe>, <embed>, và <object>; Khi bạn muốn ghép style cho các thuộc tính khác, hãy sử dụng class .embed-responsive-item.

Lưu ý! Bạn không cần phải thêm frameborder="0" trong phần tử <iframe> của bạn vì chúng tôi đã làm sẵn điều đó cho bạn rồi.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>