Tạo Giao Diện Responsive cho Video Youtube

Youtube - trang web cung cấp nhiều video trên thế giới và là nơi kiếm tiền của Maker Money Online (MMO). Để tăng lượt view cho youtube họ thường chèn vào blog của mình cũng tiện để tăng lượt view cho blog. Có nhiều Theme chia sẽ trên mạng thường kèm code chèn youtube nhưng có nhiều Theme lại không có, vì vậy khi chèn video thì khi xem trên youtube khung video lại bị tràn ra màn hình khó xem.

Mục lục:

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

        Thông thường ta chèn video youtube bằng cách: Vào

1. Chia sẽ
2. Nhúng
3. Chép code trong khung và dán vào blog mình.

- Nhưng có một đểu đó là khi xem Responsive (Đa màn hình) thì youtube bị tràn ra ngoài màn hình. Từ đó gây khó hịu cho người xem lẫn làm xấu đi blog của bạn, không tốt cho viêc phát triển Blog.

Và hôm nay mình sẽ hướng dẫn các bạn tạo Giao diện Responsive cho Video Youtube.

Mục Đích

• Giúp cho Blog cảu 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

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. Sau đó các bạn tiếp tục chép đoạn javascript sau vào trước thẻ </body>

JS<script type='text/javascript'>
//<![CDATA[
// Youtube Responsive
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>

3. Save Template (Lưu Mẫu) lại.
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:

HTML<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="Link Video Youtube">
</div>
</div>
</div>

Chú ý: Dòng chữ màu đỏ: Link Video Youtube. Các bạn thay bằng link video youtube bạn muốn chèn. Link Video Youtube sẽ có dạng 'https://www.youtube.com/embed/codevideo'. Ở dây Chúng ta lấy link bằng cách vào Chia sẻ --> Nhúng --> Copy link giống như hình.(Chỉ copy cái dòng có màu xanh nước biển). 

5. Xem thành quả

Demo
click to view

Nâng Cao

Cái này là nâng cao rồi nên nâng cao gì 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 , 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.