body {
font-family: ‘Arial’, sans-serif;
background-color: #121212;
color: #fff;
text-align: center;
margin: 30px;
}
h2 {
color: #ffcc00;
}
.input-container {
margin: 20px 0;
}
input, select {
width: 60%;
padding: 12px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #555;
background-color: #222;
color: #fff;
margin-bottom: 10px;
}
button {
padding: 12px 20px;
font-size: 16px;
background-color: #ff5722;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
margin-top: 10px;
}
button:hover {
background-color: #e64a19;
}
#thumbnailContainer {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 20px;
}
.thumbnail-item {
position: relative;
margin: 10px;
width: 200px;
height: auto;
cursor: pointer;
}
.thumbnail-item img {
width: 100%;
border-radius: 5px;
transition: transform 0.3s ease;
}
.thumbnail-item img:hover {
transform: scale(1.05);
}
.download-btn, .copy-btn {
display: block;
margin-top: 5px;
padding: 8px 12px;
font-size: 14px;
background-color: #388e3c;
color: white;
text-decoration: none;
border-radius: 5px;
cursor: pointer;
}
.copy-btn {
background-color: #007bff;
}
.download-btn:hover {
background-color: #2e7d32;
}
.copy-btn:hover {
background-color: #0056b3;
}
/* Popup for full-size preview */
#popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.9);
padding: 20px;
border-radius: 10px;
}
#popup img {
max-width: 90%;
max-height: 90vh;
}
#popup button {
position: absolute;
top: 10px;
right: 10px;
background: red;
color: white;
border: none;
padding: 8px 12px;
cursor: pointer;
}
 

🎥 YouTube Thumbnail Downloader & Search

X

function getThumbnail() {
let url = document.getElementById(“videoUrl”).value;
let videoId = extractVideoID(url);

if (videoId) {
let thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;

let container = document.getElementById(“thumbnailContainer”);
container.innerHTML = `

Download
Copy URL

`;
} else {
alert(“Invalid YouTube URL! Please enter a valid video link.”);
}
}

function extractVideoID(url) {
let match = url.match(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/)|youtu\.be\/)([\w-]{11})/);
return match ? match[1] : null;
}

async function searchVideos() {
let keyword = document.getElementById(“keyword”).value;
let size = document.getElementById(“size”).value;

if (!keyword) {
alert(“Please enter a keyword.”);
return;
}

let apiKey = “YOUR_YOUTUBE_API_KEY”; // Replace with a valid YouTube API Key
let apiUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&q=${encodeURIComponent(keyword)}&type=video&maxResults=12&key=${apiKey}`;

try {
let response = await fetch(apiUrl);
let data = await response.json();

let container = document.getElementById(“thumbnailContainer”);
container.innerHTML = “”;

if (data.items && data.items.length > 0) {
data.items.forEach(video => {
let videoId = video.id.videoId;
let thumbnailUrl = `https://img.youtube.com/vi/${videoId}/${size}.jpg`;

let thumbnailDiv = document.createElement(“div”);
thumbnailDiv.classList.add(“thumbnail-item”);

let img = document.createElement(“img”);
img.src = thumbnailUrl;
img.alt = “Thumbnail”;
img.onclick = function() { openPopup(thumbnailUrl); };

let downloadLink = document.createElement(“a”);
downloadLink.href = thumbnailUrl;
downloadLink.classList.add(“download-btn”);
downloadLink.download = `thumbnail-${videoId}.jpg`;
downloadLink.innerText = “Download”;

let copyButton = document.createElement(“button”);
copyButton.classList.add(“copy-btn”);
copyButton.innerText = “Copy URL”;
copyButton.onclick = function() { copyToClipboard(thumbnailUrl); };

thumbnailDiv.appendChild(img);
thumbnailDiv.appendChild(downloadLink);
thumbnailDiv.appendChild(copyButton);
container.appendChild(thumbnailDiv);
});
} else {
container.innerHTML = “

No results found.

“;
}
} catch (error) {
console.error(“Error fetching videos:”, error);
alert(“Failed to fetch videos. Check your API key.”);
}
}

function copyToClipboard(url) {
navigator.clipboard.writeText(url);
alert(“Thumbnail URL copied!”);
}

function openPopup(url) {
document.getElementById(“popupImage”).src = url;
document.getElementById(“popup”).style.display = “block”;
}

function closePopup() {
document.getElementById(“popup”).style.display = “none”;
}