Hướng Dẫn Cách Responsive Youtube Trên Blogger

Css Responsive Video Youtube Cho Blogspot, hiện nay có rất nhiều blogger sử dụng tính năng nhúng video trên youtube ( iframe ) trực tiếp vào blog của mình. Mà không biết răng mặc định iframe của youtube không responsive trên mobile hay những kích thường nhỏ hơn máy tính.

Làm theo cách này mình cũng thấy video youtube trên blog của mình cũng thấy tải nhẹ hơn, tốt cho seo hơn nếu bạn muốn tham khảo thêm thủ thuật blogger mới thì bạn có thể xem cách tự động thêm alt cho hình ảnh blogspot

Chúng ta có đoạn iframe mặc định của youtube như sau

<iframe width="500" height="500" src="https://www.youtube.com/embed/XOJztMG_US4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Bây giờ mình sẽ tạo một video youtube trên blog và cách responsive video đó

• B1 : Sao chép đoạn mã bên dưới vào ]]></b:skin>
• B2 : Lưu Lại

/* Responsive Youtube */
.post-body iframe{width:100%!important;}
@media screen and (max-width:960px){
.post-body iframe{max-height:90%}}
@media screen and (max-width:768px){
.post-body iframe{max-height:75%}}
@media screen and (max-width:600px){
.post-body iframe{max-height:60%}}
@media screen and (max-width:480px){
.post-body iframe{height:auto!important;max-height:auto!important}}

Lợi ích của đoạn css trên là Responsive Video Youtube trên mọi thiết bị, khiến blog của bạn nhẹ nhàng hơn và tối ưu seo tốt hơn.