Trang tải ảnh Thumbnail từ YouTube cho blogspot

Chào mọi người, ngồi vọc vạch lại cái giao diện, và thêm lại danh sách bạn bè trên trang thì thấy anhtrainang.com có chia sẽ bài viết này cũng khá hay nên mình mang về chia sẽ lại cho mọi người cùng nhau vọc vạch tìm hiểu cấu trúc lấy hình ảnh từ link youtube ra như thế nào và có thể tối ưu thật tốt trang tải hình ảnh.

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

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;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

#box-thumb h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  text-align: center;
}

#box-thumb p {
  font-size: 16px;
  color: #555;
  text-align: center;
}

#youtubeLink {
  width: 100%;
  height: 40px;
  padding: 10px;
  margin-top: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  background-color: #f9f9f9;
  transition: border-color 0.3s;
}

#youtubeLink:focus {
  border-color: #007BFF;
  outline: none;
}

#box-thumb .radio-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
}

#box-thumb input[type="radio"] {
  display: none;
}

#box-thumb label {
  display: inline-block;
  padding: 12px;
  background-color: #f1f1f1;
  cursor: pointer;
  border-radius: 6px;
  text-align: center;
  transition: background-color 0.3s;
}

#box-thumb label:hover {
  background-color: #e2e2e2;
}

#box-thumb input[type="radio"]:checked + label {
  background-color: #007BFF;
  color: white;
}

#box-thumb .btn-button {
  background-color: #33beb3;
  color: #fff;
  border: none;
  padding: 15px;
  font-size: 16px;
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: 20px;
}

#box-thumb .btn-button:hover {
  background-color: #2a9d8f;
}

#thumbnailImage {
  max-width: 100%;
  margin-top: 20px;
  text-align: center;
}

#thumbnailImage img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#downloadButton {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border-radius: 8px;
  text-decoration: none;
  font-size: 16px;
  text-align: center;
  transition: background-color 0.3s;
}

#downloadButton:hover {
  background-color: #005f8a;
}
/*]]>*/
</style>

<div id='box-thumb'>
  <form onsubmit="return generateThumbnail();">
    <h2>Tải ảnh Thumbnail từ YouTube</h2>
    <p>Dán đường link video Youtube hoặc YouTube Shorts</p>
    <input type="text" id="youtubeLink" placeholder="Ví dụ: https://www.youtube.com/watch?v=Cm_6r93Spqw hoặc https://www.youtube.com/shorts/Cm_6r93Spqw" />
    
    <div class="radio-buttons">
      <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>
    </div>

    <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);
      if (!videoId) {
        alert("Không thể trích xuất ID video từ đường link.");
        return false;
      }
      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;
      // Check for YouTube standard video
      videoId = url.match(/[?&]v=([^?&]+)/);
      if (videoId) return videoId[1];

      // Check for YouTube Shorts
      videoId = url.match(/(?:\/shorts\/|youtu\.be\/)([^?&]+)/);
      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;
      downloadButton.id = 'downloadButton';
      downloadButton.target = '_blank';
      downloadButton.textContent = 'Tải về';
      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

Các bạn sử dụng thử công cụ ở dưới đây nha! Code update mới, tải được ảnh Video Youtube Short luôn nha!

Tải ảnh Thumbnail từ YouTube

Dán đường link video Youtube hoặc YouTube Shorts

MQ Default HQ Default SD Default Max Res Default

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 với công cụ này!

Theo AnhTraiNang.Com