Dịch vụ nâng cấp, sửa lỗi, tối ưu, thiết kế blogspot

Nhúng video youtube chuẩn responsive

Nhúng video youtube chuẩn responsive

Cập nhật ngày Bởi

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ố 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.


Nhận xét