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

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