SCAR CLEARR - Kem trị sẹo rỗ hiệu quả | Cách trị sẹo rỗ trên mặt hiệu quả

Hướng dẫn nhúng video Youtube, Vimeo điều chỉnh chiều cao, chiều rộng phù hợp với website được thiết kế chuẩn responsive

Chắc hẳn bạn đã gặp rắc rối khi nhúng video của Youtube vào website nhưng khi xem trên di động hoặc máy tính bảng thì kích thước video không thay đổi theo, làm hỏng thiết kế responsive của website.
 
Hướng dẫn nhúng responsive Youtube, Vimeo vào website

Bài viết này sẽ giúp bạn khắc phục vấn đề trên bằng đoạn code CSS đơn giản và ngắn gọn như sau:

Trong phần mềm soạn thảo mã nguồn website, ở đầu trang web có thẻ <head> , trong thẻ này có thẻ <style ...>, bạn thêm đoạn code CSS sau vào trong thẻ <style>

.video-container {
 position:relative;
 padding-bottom:56.25%;
 padding-top:30px;
 height:0;
 overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
}

Thường thì mã nhúng của Youtube hay Vimeo đều ở dạng <iframe ..> .... </iframe>, thay vì nhúng trực tiếp vào website, bạn nhúng đoạn mã trên vào thẻ <div class="video-container">[Mã nhúng video ở đây]</div>:

<div class="video-container"><iframe.......></iframe></div>
Và đây là kết quả:

- Khi xem ở màn hình laptop:
Hướng dẫn nhúng responsive Youtube, Vimeo vào website

- Khi xem bằng di động, khi mà bề ngang của màn hình đã nhỏ hơn kích thước ban đầu của video thì bề ngang của video tự co nhỏ lại cho phù hợp
Hướng dẫn nhúng responsive Youtube, Vimeo vào website (2)

Bạn có thể áp dụng cho mã nhúng responsive video của Youtube và Vimeos vì chúng đều dùng thẻ <iframe>

Hướng dẫn nhúng video Youtube, Vimeo điều chỉnh chiều cao, chiều rộng phù hợp với website được thiết kế chuẩn responsive

Post a Comment

Website Tra cứu BHXH Online. Powered by Blogger.