Một iframe thích ứng sẽ hiển thị tốt trên nhiều thiết bị và kích thước màn hình khác nhau. Theo mặc định, khi bạn sao chép mã nhúng iframe, chúng tôi sẽ cung cấp mã nhúng thích ứng hoạt động với tất cả các tỷ lệ khung hình video khác nhau.
|
| 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? |
Responsive Viostream Iframe
Mã nhúng thích ứng dựa trên tỷ lệ khung hình của video. Nếu tỷ lệ này thay đổi, mã nhúng vẫn sẽ thích ứng nhưng người xem có thể thấy khoảng cách bất thường ở hai bên hoặc trên và dưới video. Để khắc phục điều này, chỉ cần sao chép mã nhúng thích ứng mới và cập nhật trang web của bạn.
Hướng dẫn chung
Trang này có thứ hạng khá tốt trên Google nên chúng tôi cũng để lại một số hướng dẫn chung ở đây. Nếu bạn là người dùng Viostream, hãy bỏ qua những hướng dẫn này và sao chép mã nhúng mặc định từ nền tảng Viostream.
Để làm cho iframe nhúng của bạn hiển thị tốt trên các thiết bị khác nhau, bạn cần bọc iframe trong một thẻ div và áp dụng CSS nội tuyến. Hãy làm theo các bước đơn giản sau:
- Lấy mã nhúng iframe và dán vào trang HTML của bạn.
- Đặt thuộc tính chiều cao và chiều rộng của thẻ iframe thành 100%
- Thay đổi thuộc tính vị trí CSS của thẻ iframe thành `absolute` và đặt các tham số CSS `left` và `top` thành `0`
- Thêm một vùng chứa `div` xung quanh thẻ iframe như được hiển thị trong đoạn mã mẫu sau. Giá trị của tham số `padding-bottom` dựa trên tỷ lệ khung hình của nội dung (trong trường hợp video 16:9, phép tính là 9/16 = 0.5625)
Mã HTML cuối cùng của bạn sẽ trông tương tự như bên dưới:
<div style="padding-bottom:56.25%; position:relative; display:block; width: 100%">
<iframe width="100%" height="100%"
src="https://www.youtube.com/embed/Kfd3lr3vulc"
frameborder="0" allowfullscreen="" style="position:absolute; top:0; left: 0">
</iframe>
</div>