Nhúng

Tạo video hoặc bản trình chiếu thích ứng nhúng dựa trên chiều rộng của trang gốc bằng cách tạo tỷ lệ nội tại có tỷ lệ trên bất kỳ thiết bị nào.

Về

Các quy tắc được áp dụng trực tiếp cho , <iframe>và các phần tử; tùy chọn sử dụng một lớp con cháu rõ ràng khi bạn muốn đối sánh kiểu dáng cho các thuộc tính khác.<embed><video><object>.embed-responsive-item

Mẹo chuyên nghiệp! Bạn không cần phải đưa frameborder="0"vào <iframe>s của mình vì chúng tôi ghi đè điều đó cho bạn.

Thí dụ

Gói bất kỳ nhúng nào giống như một <iframe>phần tử mẹ với .embed-responsivevà một tỷ lệ khung hình. Điều .embed-responsive-itemnày không được yêu cầu nghiêm ngặt, nhưng chúng tôi khuyến khích nó.

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

Tỷ lệ khía cạnh

Tỷ lệ khung hình có thể được tùy chỉnh với các lớp bổ trợ. Theo mặc định, các lớp tỷ lệ sau được cung cấp:

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

<!-- 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>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Bên trong _variables.scss, bạn có thể thay đổi tỷ lệ khung hình mà bạn muốn sử dụng. Đây là một ví dụ về $embed-responsive-aspect-ratiosdanh sách:

$embed-responsive-aspect-ratios: (
  (21 9),
  (16 9),
  (4 3),
  (1 1)
) !default;