Youtube Thumbnail Image Generate Code

:title:Download Youtube Thumbnail:/title:<h1 class="movie">Download Youtube thumbnail</h1><form onsubmit="return false;" class="ytform"> <div class="inputs"> <b>YouTube URL</b><br><br> <input type="text" id="yturl" placeholder="Paste YouTube URL" required> <br><br> <button type="button" onclick="getThumbnail()">Get Thumbnails</button></div> <div id="thumbList"></div></form><script>function getYoutubeId(url){ const m = url.match( /(?:youtube.com/(?:watch?v=|embed/|shorts/)|youtu.be/)([a-zA-Z0-9_-]{11})/ ); return m ? m[1] : null;}function getThumbnail(){ const url = document.getElementById("yturl").value.trim(); const videoId = getYoutubeId(url); if(!videoId){ alert("Invalid YouTube URL"); return; } loadAllThumbnails(videoId);}function loadAllThumbnails(videoId){ const base = "https://img.youtube.com/vi/"+videoId+"/"; const thumbs = [ {label:"Full HD (1280×720)", file:"maxresdefault.jpg"}, {label:"SD (640×480)", file:"sddefault.jpg"}, {label:"HQ (480×360)", file:"hqdefault.jpg"}, {label:"MQ (320×180)", file:"mqdefault.jpg"}, {label:"Default (120×90)", file:"default.jpg"} ]; const list = document.getElementById("thumbList"); list.innerHTML = ""; thumbs.forEach(t=>{ const card = document.createElement("div"); card.className = "thumb-card"; const title = document.createElement("strong"); title.textContent = t.label; card.appendChild(title); const img = new Image(); img.src = base + t.file; img.onload = ()=>{ if(img.naturalWidth < 300){ card.append("Image not available"); }else{ card.appendChild(img); } }; img.onerror = ()=>{ card.append("Image not available"); }; list.appendChild(card); });}</script><style>.thumb-card { background: #fff; margin-bottom: 12px; padding: 12px; border-radius: 10px; box-shadow: 0 3px 10px rgba(0, 0, 0, .06); text-align: center; overflow: hidden;}#thumbList { margin-top: 15px; display: block;}form.ytform { max-width: 520px; margin: 12px auto; padding: 12px;}.inputs { background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,.08); text-align: center;}.inputs input { width: 100%; padding: 12px; border-radius: 8px; border: 1.5px solid #ddd; font-size: 14px; outline: none;box-sizing: border-box;}.inputs button { margin-top: 10px; width: 100%; padding: 12px; border: none; border-radius: 8px; background: linear-gradient(135deg,#0062ff,#00b4ff); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;}.thumb-card img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; border-radius: 8px; border: 1px solid #eee;}.thumb-card strong { display: block; font-size: 14px; color: #0a58ca; margin-bottom: 6px;}@media (min-width: 768px) { #thumbList{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }}</style>