Cách Chèn Video Youtube Vào Bài Viết Blogspot Chỉ Qua Link URL Video

Như Các bạn biết việc sử dụng video trên youtube vào blog là việc rất hay làm, thậm chí có blog chuyên vể video luôn lấy nguồn video từ Youtube. Nhưng mỗi khi ta chèn vào blog thì ta phải làm nhiều bước để có link chèn vô Blog. Chính vì lý do đó, nay Anh Nhím Blog sẽ hướng dẫn các bạn chèn video youtube chỉ qua link URL mà không cần qua chế độ HTML.

Mục lục:

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

Mục Đích

• Giúp các bạn chèn link nhanh gọn lẹ, không rườm rà nhiều bước.
• Chế độ load film không đồng bộ (Load Blog bạn trước khi đến khung chiếu video thì lúc này nó mới hiện film) => Tiết kiệm băng thông Blogspot.
• ........

Thực Hiện

1.Các bạn đăng Nhập Blogger >> Mẫu >> Chỉnh Sửa HTML
2. Sau đó chèn đoạn code sau và trước thẻ </body>

Jquery<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");};
var videoEmbed = {
    invoke: function(){     
        $('.post-body').html(function(i, html) {
            return videoEmbed.convertMedia(html);
        });    
    },
    convertMedia: function(html){
          var pattern = /(?:http?s?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g;      
        if(pattern.test(html)){
             var replacement = '<img class="video-thumbnail" alt="video thumbnail" height="300" src="https://ytimg.googleusercontent.com/vi/$1/0.jpg" width="600"/> <div class="videoyoutube"><div class="video-responsive"><iframe height="281" width="500" src="https://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe></div></div>';
    var html = html.replace(pattern, replacement);
        }
         return html;
    }
}
setTimeout(function(){
    videoEmbed.invoke();
},800);
//]]>
</script>
</b:if>

Chú ý: Nếu blog đã truy xuất thư viện Jquery rồi thì các bạn xóa dòng màu đỏ trên.

Thứ hai nếu bạn không muốn hiện ảnh Thumbnail thì các bạn xóa dòng code màu xanh lá cây là được. Xem Demo là hiểu Thumbnail là sao. 

3. Sau đó chèn các mã CSS bên dưới trên thẻ đóng  </ head>

CSS<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.videoyoutube{
    margin:20px 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;
}
</style>
</b:if>

4. Lưu mẫu lại và xem kết quả.
5. Để Sử dụng thì khi bạn xem video nào đó trên youtube muốn chèn vào blog thì các bạn chỉ cần chép link URL hiện trên trình duyệt của bạn rồi dán vào Bài viết của blogspot thôi. Không cần qua chế độ HTML dán vào.

Lời Kết

Vậy là mình đã hướng dẫn các bạn , 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