Khuyễn mãi giảm 20% theme code nhân dịp Xuân Giáp Thìn 2024 (Áp dụng theme code từ 500k) Mua ngay

Hướng dẫn tạo tool tải ảnh Thumbnail từ YouTube cho Blogger

Hướng dẫn tạo tool tải ảnh Thumbnail từ YouTube cho Blogger

Cập nhật ngày Bởi
Tool 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.

Hướng dẫn tạo tool tải ảnh Thumbnail từ YouTube cho Blogger

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.

Tool Tải ảnh Thumbnail từ YouTube
<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=QuMns8b4vJA"/>
    <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>

Hướng dẫn cài đặt :
  • Bước 1: Vào tạo Trang mới
  • Bước 2: Chuyển sang Chế độ xem HTML
  • Bước 3: Copy và Paste tất cả code trên vào trang
  • Bước 4: Nhấn Xuất bản và xem kết quả.
Hình ảnh webp nhỏ hơn hình ảnh JPEG và PNG thông thường với kích thước tệp giảm 25-35%. Điều này làm giảm kích thước tải trang web và cải thiện hiệu suất.

Chúc bạn thành công !

Comments

Call
0948713329
Contact Me on Zalo