Tạo Giao Diện Responsive cho Video Youtube Version 2

Responsive (Đa màn hình) cho video youtube. Có rất nhiều theme blogger hiện nay đã hỗ trợ việc này. nhưng cũng có một số lại không có. Vậy nên mình sẽ hướng dẫn các bạn làm điều đó.Nhiều ý kiến than phiền là thủ thuật này mình đã chia sẽ rồi (Xem tại đây ) nhưng video hiện rất lâu nên hôm nay mình sẽ chia sẻ nữa thủ thuật này sẽ nhanh, gọn hơn rất nhiêu so với Version 1 mà mình đã chia sẽ trước đó.

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao
• Lời Kết

Mục Đích

• Giúp cho Blog của bạn có tính Responsive hơn
• Khắc phục lỗi Video Youtube không bị tràn màn hình
• Tăng lượt view cho youtube cũng như blog
• Giúp người xem càm thấy thoải mái hơn
• Giúp Cho Video load nhanh nhiều so với Version 1 

Thực Hiện

1. Đầu tiên các bạn vào Blogger --> Mẫu --> Chỉnh Sửa HTML. Sau đó chép đoạn CSS sau vào trước thẻ  ]]></b:skin> hoặc thẻ </style>

CSS.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

2. Khác với Version 1  . Ở Version 2 này các bạn chỉ cần sao chép đạn css ở trên thôi là đủ . Sau đó Save Template (Lưu Mẫu) lại.
3. Các bạn vào youtube lấy Link chèn như sau:
- Các bạn chép hết đoạn có hình màu xanh nước biển như hình

4. Để thưởng thức thành quả thì các bạn khi viết bài thì chuyển qua CHẾ ĐỘ HTML rồi chép đoạn html sau và bên trong đoạn vừa chép ở trên như sau:

HTML<div class="video-container">..........Để đoạn màu xanh ở đây............</div>

Chý ý: Cái '.........' các bạn bỏ đi nha, mình để cho đẹp thôi. Phải nói chứ có nhiều bạn troll nhau lắm.

Demo
click to view

Các bạn vào link Result trên kéo xuống là thấy ví dụ Cho version 2. Còn cái trên là cho version 1 , các bạn sẽ nhìn thấy sự khác biệt rõ rệt.

Nâng Cao

Cái này là nâng cao rồi nên ko còn thứ khác nói nữa 

Lời Kết

Vậy là mình đã hướng dẫn các bạn Tạo Giao Diện Responsive cho Video Youtube Version 2, nếu có thắc mắc các bạn cứ comment bên dưới hoặc liên hệ mình, mình sẽ giải đáp. Chúc các bạn thành công

Nguyễn Đăng Hậu

Đam mê công nghệ, lập trình web, game đua xe và nhiều thứ khác. Thích học hỏi, tìm tòi nhiều kiến thức hay bổ ích. Thích chia sẽ cho mọi người, bạn bè về những kiến thức học được.