Lorem ipsum dolor sit amet, consectetur adipiscing elit. Test link

Chèn hình ảnh, video youtube vào comment blogger

Bài này mình Hướng dẫn chèn hình ảnh, video youtube vào comment blogger đơn giản nhất, chuẩn responsive trên mobile.


Chèn hình: Copy link hình ảnh dán vào nội dung bình luận
Chèn video: Copy link video youtube vào nội dung bình luận


Demo: Xem trực tiếp bình luận bài viết này

Hướng dẫn chèn hình ảnh, video youtube vào comment blogger
Các bước thực hiện như sau:


Bước 1: Thêm CSS trước thẻ đóng ]]></b:skin>


.comment-content .responsive-video-wrap{position:relative;width:100%;padding:0;padding-top:56%}
.comment-content .responsive-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.comment-content img{max-width:100%}


Bước 2: Thêm đoạn JS trước thẻ đóng </body>


<script>
  //<![CDATA[
  ! function(e) {
    e.fn.replaceText = function(n, t, i) {
      return this.each(function() {
        var o, r, l = this.firstChild,
          u = [];
        if (l)
          do {
            3 === l.nodeType && (r = (o = l.nodeValue).replace(n, t)) !== o && (!i && /</.test(r) ? (e(l).before(r), u.push(l)) : l.nodeValue = r)
          } while (l = l.nextSibling);
        u.length && e(u).remove()
      })
    }
  }(jQuery);
  $("p.comment-content").each(function() {
    var e = $(this);
    e.replaceText(/(https:\/\/\S+(\.png|\.jpeg|\.jpg|\.gif))/g, '<img src="$1"/>'), e.replaceText(/(?:https:\/\/)?(?:www\.)?(?:youtube\.com)\/(?:watch\?v=)?(.+)/g, '<div class="responsive-video-wrap"><iframe id="youtube" width="100%" height="358" src="https://www.youtube.com/embed/$1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>')
  })
  //]]>
</script>


Xong bạn lưu lại và kiểm tra kết quả

Đoạn code trên chỉ áp dụng với đuôi ảnh chữ thường, áp dụng cho cả chữ in hoa bạn dùng code này


<script>
  //<![CDATA[
  ! function(e) {
    e.fn.replaceText = function(n, t, i) {
      return this.each(function() {
        var o, r, l = this.firstChild,
          u = [];
        if (l)
          do {
            3 === l.nodeType && (r = (o = l.nodeValue).replace(n, t)) !== o && (!i && /</.test(r) ? (e(l).before(r), u.push(l)) : l.nodeValue = r)
          } while (l = l.nextSibling);
        u.length && e(u).remove()
      })
    }
  }(jQuery);
  $("p.comment-content").each(function() {
    var e = $(this);
    e.replaceText(/(https:\/\/\S+(\.png|\.jpeg|\.jpg|\.gif|\.PNG|\.JPEG|\.JPG|\.GIF))/g, '<img src="$1"/>'), e.replaceText(/(?:https:\/\/)?(?:www\.)?(?:youtube\.com)\/(?:watch\?v=)?(.+)/g, '<div class="responsive-video-wrap"><iframe id="youtube" width="100%" height="358" src="https://www.youtube.com/embed/$1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>')
  })
  //]]>
</script>

Để replaceText thành icon các bạn gõ thêm

e.replaceText(':))', '<img src="link icon 1"/>'),
e.replaceText(':)', '<img src="link icon 2"/>'),
e.replaceText(':D', '<img src="link icon 3"/>'),
e.replaceText(':P', '<img src="link icon 4"/>'),
e.replaceText(':(', '<img src="link icon 5"/>'),
e.replaceText('ký tự', '<img src="link icon 6"/>')

Code trên với code dưới cách nhau bằng dấu phẩy

Chèn hình ảnh, video youtube vào comment blogger


Post a Comment