Code tạo Trang tải ảnh Thumbnail từ YouTube cho blogspot

Anh Trai Nắng
2
Share Code tạo Trang tải ảnh Thumbnail từ YouTube cho blogspot, Tool Tải ảnh Thumbnail từ YouTube for Blogger.

Bạn có thể tìm thấy nhiều trang web và dịch vụ trực tuyến cung cấp chức năng tải ảnh Thumbnail từ YouTube. Tuy nhiên bài viết này sẽ share code giúp các bạn có thể tạo Trang sử dụng chức năng này trực tiếp trên Blogspot.

Code tạo Trang tải ảnh Thumbnail từ YouTube
Code tạo Trang tải ảnh Thumbnail từ YouTube

Giới thiệu

Trang Tải ảnh Thumbnail từ YouTube là một công cụ đơn giản và tiện lợi, được thiết kế để giúp người dùng trích xuất và tải về ảnh thumbnail từ các video trên YouTube. Bằng cách nhập đường link của video, người dùng có thể chọn giữa các kiểu ảnh thumbnail khác nhau như MQ Default, HQ Default, SD Default, và Max Res Default.

Sau khi nhấn vào nút "Tạo ảnh Thumbnail", công cụ sẽ hiển thị trực tiếp ảnh thumbnail lựa chọn, đồng thời cung cấp khả năng tải về ảnh đó dưới dạng tệp tin JPG. Tool này giúp đơn giản hóa quá trình lấy ảnh thumbnail từ YouTube, phù hợp cho việc sử dụng trong các dự án sáng tạo, nghiên cứu, hoặc chỉ đơn giản để chia sẻ ảnh thumbnail của video yêu thích.

Code tạo Trang tải ảnh Thumbnail từ YouTube

Share Full code

<style>
/*<![CDATA[*/
#box-thumb{max-width:600px;margin:auto}
#youtubeLink{width:100%;height:40px;padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#f3f3f3}
#box-thumb input[type="radio"]{display:none}
#box-thumb label{display:inline-block;padding:10px;background-color:#eee;cursor:pointer;margin:5px;border-radius:5px}
#box-thumb label:hover{background-color:#ddd}
#box-thumb input[type="radio"]:checked + label{background-color:#007BFF;color:white}
#box-thumb .btn-button{background:#33beb3;color:#fff;border:initial;padding:10px;line-height:35px;font-size:14px;border-radius:5px;width:100%;cursor:pointer}
#box-thumb #thumbnailImage{max-width:100%;margin-top:20px;text-align:center}
#box-thumb #thumbnailImage img{max-width:100%;max-height:100%;display:inline-block}
/*]]>*/
</style>
<div id='box-thumb'>
  <form onsubmit="return generateThumbnail();">
    <h2>Tải ảnh Thumbnail từ YouTube</h2>
    <p>Dán đường link video Youtube</p>
    <input type="text" id="youtubeLink" placeholder="Ví dụ: https://www.youtube.com/watch?v=Cm_6r93Spqw"/>
    <input type="radio" id="mqdefault" name="thumbnailType" value="mqdefault.jpg" checked = 'true'/>
    <label for="mqdefault">MQ Default</label>
    <input type="radio" id="hqdefault" name="thumbnailType" value="hqdefault.jpg"/>
    <label for="hqdefault">HQ Default</label>
    <input type="radio" id="sddefault" name="thumbnailType" value="sddefault.jpg"/>
    <label for="sddefault">SD Default</label>
    <input type="radio" id="maxresdefault" name="thumbnailType" value="maxresdefault.jpg"/>
    <label for="maxresdefault">Max Res Default</label>
    <button class='btn-button' type="submit">Tạo ảnh Thumbnail</button>
    <div id="thumbnailImage"></div>
  </form>
  <script>
    //<![CDATA[
    function generateThumbnail() {
      var youtubeLink = document.getElementById("youtubeLink").value;
      if (youtubeLink.trim() === "") {
        alert("Vui lòng nhập một đường link YouTube hợp lệ.");
        return false;
      }
      var videoId = extractVideoId(youtubeLink);
      var thumbnailType = document.querySelector('input[name="thumbnailType"]:checked').value;
      var thumbnailUrl = `https://img.youtube.com/vi/${videoId}/${thumbnailType}`;
      displayThumbnail(thumbnailUrl);
      return false;
    }
    function extractVideoId(url) {
      var videoId = url.match(/[?&]v=([^?&]+)/);
      return videoId ? videoId[1] : null;
    }
    function displayThumbnail(url) {
      var thumbnailImage = document.getElementById("thumbnailImage");
      thumbnailImage.innerHTML = `<img src="${url}" alt="Ảnh Thumbnail YouTube">`;
      createDownloadButton(url);
    }
    function createDownloadButton(imageUrl) {
      var downloadButton = document.createElement("a");
      downloadButton.href = imageUrl;
      document.getElementById("thumbnailImage").appendChild(downloadButton);
    }
    //]]>
  </script>
</div>

Các bạn chỉ cần vào phần Trang > Tạo Trang mới và dán toàn bộ code trên vào Chế độ xem HTML, xuất bản là xong!

Xem Demo trực tiếp

Tải ảnh Thumbnail từ YouTube

Dán đường link video Youtube

Kết luận

Đây là code được share từ trang web giaodien.blog với bài viết Tool Tải ảnh Thumbnail từ YouTube. Các bạn có thể ghé xem để ủng hộ tác giả. Mình viết lại cũng chỉ để lấy nội dung và khi cần thì mở lên sử dụng. Cảm ơn các bạn đã ghé xem. Chúc các bạn thành công!

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

2 Nhận xét

  1. Chưa tối ưu lắm, ví dụ short video không lấy được :D

    Trả lờiXóa
    Trả lời
    1. cơ bản thì nó cũng đã cũ rồi ý nhưng mà cover trên blogspot vẫn hay

      Xóa
Đăng nhận xét

#buttons=(Thanks!) #days=(7)

À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
Ok, Go it!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu