Bài viết này mình hướng dẫn các bạn cách Nhúng video youtube chuẩn responsive lên trang blogspot hoặc website của bạn đang sử dụng.
Nhúng video youtube lên trang blogspot hoặc website thì dễ còn làm cho nó responsive trên di động lại là một vấn đề khó cho nhiều bạn không am hiểu CSS.
Khó ở chỗ là Video không tự co giãn theo tỉ lệ khung hình, và dưới đây là cách Nhúng video youtube chuẩn responsive lên mọi thiết bị.
Bước 1: Thêm CSS trước thẻ đóng </b:skin> của blogspot mà bạn đang dùng.
.container-video{position:relative;width:100%;overflow:hidden;padding-top:56.25%}
.video-iframe{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;border:none}
Bước 2: Khi nhúng video bạn theo HTML bên dưới
<div class="container-video">
<iframe class="video-iframe" src="https://www.youtube.com/embed/64rYhA-Yf5A"></iframe>
</div>
Bạn chỉ cần thay ID video youtube của bạn vào cái ID màu xanh là được. Một số thuộc tính như tự động play, fullscreen thì bạn tự thêm.
Một số CSS căn tỉ lệ khung hình:
padding-top: 56.25%; // Tỉ lệ khung hình 16:9
padding-top: 75%; // Tỉ lệ khung hình 4:3
padding-top: 66.66%; // Tỉ lệ khung hình 3:2
padding-top: 62.5%; // Tỉ lệ khung hình 8:5
padding-top: 100%; // Tỉ lệ khung hình vuông 1:1
Bạn code thể xem responsive video youtube bên dưới.