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

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

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!