YouTube Thumbnail Downloader

Prompt :-

Create a fully professional, mobile-first, responsive YouTube Thumbnail Downloader website using HTML, CSS, and JavaScript. The website should have:

1. UI Design:

- Dark modern theme with neon-style glow text.

- Header: 🎬 YouTube Thumbnail Downloader

- Professional, clean, and minimal layout for both desktop and mobile.

2. Core Functionality:

- Input box for pasting any YouTube video link.

- “Get Thumbnail” button.

- Extract video ID from the link on click.

- Fetch and display the video thumbnail.

- Show preview of thumbnail.

- Download buttons for multiple resolutions: 1280x720, 640x480, 480x360, 320x180.

3. Ads Integration:

- Top banner ad (728x90)

- Middle ad (300x250) shown after clicking Get Thumbnail

- Sidebar ad (160x600)

- Footer banner ad (728x90)

4. Design Features:

- Smooth hover effects and transitions.

- Neon glow buttons and text.

- Mobile-first layout with responsive design.

- Status messages for invalid URL or loading thumbnails.

- SEO-friendly meta tags.

- All code in a single HTML file with inline CSS and JS, ready to host.

HTML CODE :-

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8"/>

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

<title>🎬 YouTube Thumbnail Downloader</title>

<meta name="description" content="Download YouTube video thumbnails in HD/SD/HQ/MQ. Mobile-first and fast."/>

<meta name="keywords" content="YouTube thumbnail, mobile downloader, video thumbnail"/>

<meta name="author" content="YourName"/>

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"/>

<style>

*{box-sizing:border-box;margin:0;padding:0}

body{background:#0b0f19;color:#eee;font-family:'Poppins',sans-serif;line-height:1.4;padding:10px}

header{font-size:24px;text-align:center;color:#0ff;text-shadow:0 0 15px #0ff;margin:10px 0;font-weight:600}

.input-row{margin:10px 0;display:flex;flex-direction:column;gap:10px}

input[type="url"]{width:100%;padding:12px;border:none;border-radius:8px;font-size:15px}

button{padding:12px;border:none;border-radius:8px;background:#0ff;color:#000;font-weight:600;cursor:pointer;transition:.3s;font-size:15px}

button:hover{background:#00ffaa;box-shadow:0 0 10px #0ff}

.preview img{max-width:100%;border-radius:10px;margin:10px 0;transition:.3s}

.preview img:hover{transform:scale(1.02)}

.res-buttons{display:flex;flex-direction:column;gap:10px;margin-top:10px}

.res-buttons button{background:#111;color:#0ff;border:1px solid #0ff;padding:10px;font-size:15px}

.res-buttons button:hover{background:#0ff;color:#000}

.ad-slot{text-align:center;margin:15px 0}

footer{text-align:center;font-size:13px;color:#888;margin:20px 0}

.status{margin:10px 0;font-size:14px;color:#ccc;text-align:center}

@media(min-width:768px){.res-buttons{flex-direction:row;flex-wrap:wrap}}

</style>

</head>

<body>

<header>🎬 YouTube Thumbnail Downloader</header>

<div class="ad-slot">

<script type="text/javascript">

atOptions = {

'key' : '33ce31f69c508170a2ae9961ac29bfe4',

'format' : 'iframe',

'height' : 250,

'width' : 300,

'params' : {}

};

</script>

<script type="text/javascript" src="//www.highperformanceformat.com/33ce31f69c508170a2ae9961ac29bfe4/invoke.js"></script>

<div class="input-row">

<input id="urlInput" type="url" placeholder="Paste YouTube video URL"/>

<button id="getBtn">Get Thumbnail</button>

</div>

<div class="ad-slot" id="middleAd" style="display:none">

<script type="text/javascript">

atOptions = {'key':'0146a0a0f4f0d0678b5b40eb1e211501','format':'iframe','height':250,'width':300,'params':{}};

</script>

<script type="text/javascript" src="//www.highperformanceformat.com/0146a0a0f4f0d0678b5b40eb1e211501/invoke.js"></script>

</div>

<div class="preview" id="previewArea" style="display:none">

<img id="thumbImg" src="" alt="Thumbnail preview"/>

<div class="res-buttons" id="resButtons"></div>

</div>

<div class="status" id="status"></div>

<div class="ad-slot">

<script type="text/javascript">

atOptions = {'key':'af3b5e209770e99105eb72b6f6ec57ac','format':'iframe','height':600,'width':160,'params':{}};

</script>

<script type="text/javascript" src="//www.highperformanceformat.com/af3b5e209770e99105eb72b6f6ec57ac/invoke.js"></script>

</div>

<div class="ad-slot">

<script type="text/javascript">

atOptions = {

'key' : '33ce31f69c508170a2ae9961ac29bfe4',

'format' : 'iframe',

'height' : 250,

'width' : 300,

'params' : {}

};

</script>

<script type="text/javascript" src="//www.highperformanceformat.com/33ce31f69c508170a2ae9961ac29bfe4/invoke.js"></script>

<script>

const urlInput=document.getElementById('urlInput');

const getBtn=document.getElementById('getBtn');

const previewArea=document.getElementById('previewArea');

const thumbImg=document.getElementById('thumbImg');

const resButtons=document.getElementById('resButtons');

const status=document.getElementById('status');

const middleAd=document.getElementById('middleAd');

const RESOLUTIONS=[

{key:'maxresdefault',label:'1280×720 (HD)'},

{key:'sddefault',label:'640×480'},

{key:'hqdefault',label:'480×360'},

{key:'mqdefault',label:'320×180'}

];

function extractVideoID(url){

if(!url) return null;

url=url.trim();

const patterns=[/(?:v=|youtu\.be\/|embed\/|shorts\/)([a-zA-Z0-9_-]{11})/];

for(let p of patterns){

const m=url.match(p);

if(m&&m[1]) return m[1];

}

return null;

}

function buildThumbURL(id,key){return `https://i.ytimg.com/vi/${id}/${key}.jpg`; }

async function checkImage(url){return new Promise(resolve=>{const img=new Image();img.onload=()=>resolve(true);img.onerror=()=>resolve(false);img.src=url+`?cb=${Date.now()}`;});}

getBtn.addEventListener('click',async function(){

previewArea.style.display='none';

status.textContent='';

middleAd.style.display='block';

const url=urlInput.value;

const id=extractVideoID(url);

if(!id){status.textContent='⚠️ Invalid URL'; return;}

status.textContent='🔍 Checking thumbnails...';

let available=[];

for(let r of RESOLUTIONS){available.push({r,ok:await checkImage(buildThumbURL(id,r.key))});}

const anyOk=available.some(o=>o.ok);

if(!anyOk){status.textContent='🚫 No thumbnails found';return;}

const best=available.find(o=>o.ok);

thumbImg.src=buildThumbURL(id,best.r.key);

thumbImg.alt=`Thumbnail ${best.r.label}`;

previewArea.style.display='block';

status.textContent=`✅ Preview shown: ${best.r.label}`;

resButtons.innerHTML='';

available.forEach(o=>{

const btn=document.createElement('button');

btn.textContent=o.r.label;

if(o.ok){btn.onclick=()=>window.open(buildThumbURL(id,o.r.key),'_blank');}else{btn.disabled=true;btn.style.opacity=0.5;}

resButtons.appendChild(btn);

});

</script>

</body>

</html>

Search This Blog

H4X Hunter Dev