Sử dụng Video làm Thumbnail trong Blogspot

Hướng dẫn cách sử dụng Video làm Thumbnail trong Blogspot / Blogger.

Hiện nay có khá nhiều các bạn làm web chia sẻ nhạc và video. Tuy nhiên, có một khó khăn chung mà chưa giải quyết được đó chính là lấy video trong bài viết ra làm thumbnail trên trang chủ hay gọi là Video làm Thumbnail. Hoặc nếu có thì phải dùng tới JS để lấy link video từ trong nội dung bài viết ra. Như vậy sẽ làm ảnh hưởng tới tốc độ tải trang.

Hôm nay, mình sẽ tiếp tục hướng dẫn các bạn tận dụng tính năng của Enclosure Links trong Blogspot. Với cách này thì chúng ta sẽ không phải sử dụng JS để get video trong bài viết. Và khả năng tùy chỉnh lại cao nữa 🙂

Các bước thực hiện

Bước 1: Kích hoạt Enclosure Links

Mở menu Settings -> Other. Tại phần Enable Title Links and Enclosure Links chuyển từ No thành Yes. Xem lại bước 1 trong bài viết Tùy chọn Thumbnail theo ý thích cho Blogspot để rõ hơn 🙂

Bước 2: Sử dụng Enclosure Links làm Thumbnail

Được rồi, bây giờ các bạn copy đoạn code dưới và thay cho code Thumbnail hiện tại của Theme nhé.

<b:if cond='data:blog.pageType == "index"'>
 <b:loop values='data:post.enclosures' var='enclosure'>
 <b:if cond='data:enclosure.mimeType == &quot;video&quot;'>
 <div class='videobox'>
 <iframe width="560" height="315" expr:src='data:enclosure.url' frameborder="0" allowfullscreen=''></iframe>
 </div>
 </b:if>
 </b:loop>
</b:if>

Bước 3: Thêm CSS

Ở bước này chúng ta sẽ thêm một chút CSS để video có thể tương thích với các màn hình khác nhau.

.videobox {
 position: relative;
 padding-bottom: 75%;
 overflow: hidden;
}
.videobox iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100% !important;
 height: 100% !important;
}

Bước 4: Cách thêm khi post bài

video anclosure link Video làm Thumbnail

Khi post bài, các bạn hãy để ý tới phần Enclosure Links nhé. Tại ô Add link thì các bạn nhập link của video, còn ô Add mime type thì các bạn nhập là video.

 

Tổng kết

Rất đơn giản phải không, nếu áp dụng tốt các thẻ điều kiện nữa thì chúng ta sẽ có được bộ code chức năng thumbnail cho Blogspot khá là bá đấy :D. Chúc các bạn thành công với  hướng dẫn Video làm Thumbnail.

Nếu thấy Blog của mình hữu ích hãy chia sẻ nó tới bạn bè của mình và cũng đừng quên theo dõi blog qua email nữa nhé! Và đừng quên cho mình 5 sao nếu thấy bài viết hữu ích đấy ?

Chú ý: Nội dung trong các bài viết chỉ có tính chất tham khảo. Độc giả vui lòng tham khảo ý kiến của bác sĩ trước bất cứ áp dụng nào! Vui lòng liên hệ để gỡ bài nếu bạn thấy sai và không đúng! Blog xin chân thành cảm ơn!