{"id":32,"date":"2024-03-25T10:10:07","date_gmt":"2024-03-25T10:10:07","guid":{"rendered":"https:\/\/calcuconvertonline.com\/?page_id=32"},"modified":"2024-03-25T10:10:11","modified_gmt":"2024-03-25T10:10:11","slug":"youtube-thumbnail-downloader","status":"publish","type":"page","link":"https:\/\/calcuconvertonline.com\/index.php\/youtube-thumbnail-downloader\/","title":{"rendered":"YouTube Thumbnail Downloader"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>YouTube Thumbnail Downloader<\/title>\n  <style>\n    \/* CSS Styles *\/\n    body {\n      font-family: Arial, sans-serif;\n      margin: 0;\n      padding: 0;\n      \n      justify-content: center;\n      align-items: center;\n      height: 100vh;\n      background-color: #f4f4f4;\n    }\n\n    .container {\n      text-align: center;\n      background-color: #fff;\n      padding: 20px;\n      border-radius: 8px;\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n    }\n\n    h1 {\n      color: #333;\n    }\n\n    .input-section {\n      margin-bottom: 20px;\n    }\n\n    input[type=\"text\"] {\n      padding: 8px;\n      width: 70%;\n      border-radius: 4px;\n      border: 1px solid #ccc;\n    }\n\n    button {\n      padding: 8px 16px;\n      border: none;\n      border-radius: 4px;\n      background-color: #007bff;\n      color: #fff;\n      cursor: pointer;\n      transition: background-color 0.3s ease;\n    }\n\n    button:hover {\n      background-color: #0056b3;\n    }\n\n    .output-section img {\n      max-width: 100%;\n      height: auto;\n      display: none;\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"container\">\n    <h1>YouTube Thumbnail Downloader<\/h1>\n    <div class=\"input-section\">\n      <input type=\"text\" id=\"videoURL\" placeholder=\"Enter YouTube Video URL\">\n      <button onclick=\"getThumbnail()\">Get Thumbnail<\/button>\n    <\/div>\n    <div class=\"output-section\">\n      <img decoding=\"async\" src=\"\" alt=\"Thumbnail\" id=\"thumbnailImage\">\n    <\/div>\n  <\/div>\n\n  <script>\n    \/\/ JavaScript code\n    function getThumbnail() {\n      const videoURL = document.getElementById('videoURL').value;\n      const videoId = extractVideoId(videoURL);\n\n      if (videoId) {\n        const thumbnailUrl = `https:\/\/img.youtube.com\/vi\/${videoId}\/maxresdefault.jpg`;\n        const thumbnailImage = document.getElementById('thumbnailImage');\n        thumbnailImage.src = thumbnailUrl;\n        thumbnailImage.style.display = 'block';\n      } else {\n        alert('Invalid YouTube URL. Please enter a valid URL.');\n      }\n    }\n\n    function extractVideoId(url) {\n      const regExp = \/^(?:https?:\\\/\\\/)?(?:www\\.)?(?:youtube\\.com\\\/(?:[^\\\/\\n\\s]+\\\/\\S+\\\/|(?:v|e(?:mbed)?)\\\/|\\S*?[?&]v=)|youtu\\.be\\\/)([a-zA-Z0-9_-]{11})\/;\n      const match = url.match(regExp);\n\n      return match ? match[1] : null;\n    }\n  <\/script>\n<\/body>\n<\/html>\n<br>\n<br>\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>YouTube Thumbnail Downloader<\/title>\n  <style>\n    \/* CSS Styles *\/\n    \/* ... (your existing styles) ... *\/\n  <\/style>\n<\/head>\n<body>\n  <div class=\"container\">\n    <h1>YouTube Thumbnail Downloader<\/h1>\n    <p>This tool allows you to easily retrieve the thumbnail of any YouTube video by entering its URL below. Simply paste the YouTube video URL into the input field and click &#8220;Get Thumbnail&#8221; to display the video&#8217;s thumbnail image.<\/p>\n    <div class=\"input-section\">\n      <input type=\"text\" id=\"videoURL\" placeholder=\"Enter YouTube Video URL\">\n      <button onclick=\"getThumbnail()\">Get Thumbnail<\/button>\n    <\/div>\n    <div class=\"output-section\">\n      <img decoding=\"async\" src=\"\" alt=\"Thumbnail\" id=\"thumbnailImage\">\n    <\/div>\n  <\/div>\n\n  <script>\n    \/\/ JavaScript code\n    \/* ... (your existing JavaScript code) ... *\/\n  <\/script>\n<\/body>\n<\/html>\n\n\n","protected":false},"excerpt":{"rendered":"<p>YouTube Thumbnail Downloader YouTube Thumbnail Downloader Get Thumbnail YouTube Thumbnail Downloader YouTube Thumbnail Downloader This tool allows you to easily retrieve the thumbnail of any YouTube video by entering its URL below. Simply paste the YouTube video URL into the input field and click &#8220;Get Thumbnail&#8221; to display the video&#8217;s thumbnail image. Get Thumbnail<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-32","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":1,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":33,"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/pages\/32\/revisions\/33"}],"wp:attachment":[{"href":"https:\/\/calcuconvertonline.com\/index.php\/wp-json\/wp\/v2\/media?parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}