Tool Tải ảnh Thumbnail từ YouTube

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.

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

Share Full code

Copy

<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>