Responsive là một thuật ngữ được dùng trong việc thiết kế giao diện Website. Giao diện responsive ở đây có nghĩa là giao diện đó phù hợp với mọi kích thước màn hình từ Smartphone, máy tính bảng đến màn hình Desktop. Việc hiển thị này sẽ do CSS hoặc JS đảm nhiệm. Chúng ta thường nghe đến Blogger Template Responsive, WordPress Theme Responsive,... chứ ít khi nghe đến Video responsive đúng không? Đối với Video cũng vậy, đôi khi chúng ta cần Video đó phải hiển thị tốt trên tất cả kích thước màn hình khác nhau để cho người xem Video cảm thấy có thiện cảm với Blog/Website của mình. Chính vì vậy, hôm nay mình sẽ hướng dẫn cho các bạn một thủ thuật để thực được điều đó.
Các bạn truy cập trang này để Copy code: [Xem code ##search##]
Chằng hạn ở đây mình muốn nhúng bài hát See You Again vào Blog của mình thì mình sẽ
Có sự khác biệt đúng không?! Khi bạn thu nhỏ hoặc phóng to trình duyệt thì kích thước Video được nhúng theo cách 2 cũng sẽ thay đổi theo, điều đó làm cho Blog/Website của bạn sẽ trở nên thân thiện hơn với người dùng!! :D
Cách 1:
Lấy code video Responsive
Copy đoạn code phía dưới vào vị trí bạn muốn Video xuất hiện. Lưu ý: phải chuyển qua Tab soạn bằng HTML rồi mới dán code vàoCác bạn truy cập trang này để Copy code: [Xem code ##search##]
Lấy ID video từ YouTube
Tiếp đến chúng ta phải lấy được ID của Video mà chúng ta định nhúng nó vào Blog/Website.Chằng hạn ở đây mình muốn nhúng bài hát See You Again vào Blog của mình thì mình sẽ
- Truy cập vào Video đó => Nhìn lên ô địa chỉ URL => Copy đoạn ID (là đoạn mã ở sau dấu "=")
- Các bạn xem hình bên dưới để thấy rõ hơn rồi chuyển sang bước kế tiếp
 |
| Lấy ID video trên Youtube |
- Quay trở về trình soạn thảo bài đăng của Blogspot
- Đổi chữ "ID video" thành ID video bạn đã Copy được
- Đến bước cuối cùng, cũng là bước... khó nhất > Click xuất bản và xem thành quả của mình
Cách 2
- Các bạn thêm đoạn CSS bên dưới vào phía trên thẻ ]]></b:skin>
.responsive-video {
position: relative;
padding-bottom: 56.25%;
}
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
- Chèn đoạn Code bên dưới vào vị trí bạn muốn Video hiển thị (Chuyển qua tab HTML rồi mới chèn Code vào). Đổi ID video thành ID của video bạn muốn chèn nhé!
<div class="responsive-video">
<iframe src="https://www.youtube.com/embed/ID video" frameborder="0" allowfullscreen></iframe>
</div>
Dưới đây là 2 cách nhúng video vào Blog
Cách 1: Video được nhúng bằng cách thông thường
Cách 2: Video được nhúng bằng code Responsive
Có sự khác biệt đúng không?! Khi bạn thu nhỏ hoặc phóng to trình duyệt thì kích thước Video được nhúng theo cách 2 cũng sẽ thay đổi theo, điều đó làm cho Blog/Website của bạn sẽ trở nên thân thiện hơn với người dùng!! :D
COMMENTS