YouTube Thumbnail Downloader
CSS (styles.css):
css
Copy code
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
text-align: center;
}
h1 {
color: #333;
}
.input-container {
margin-bottom: 20px;
}
input[type="text"] {
width: calc(100% - 120px);
padding: 10px;
border-radius: 5px 0 0 5px;
border: 1px solid #ccc;
outline: none;
}
button {
width: 120px;
padding: 10px;
border-radius: 0 5px 5px 0;
border: none;
background-color: #3498db;
color: #fff;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
#thumbnailContainer {
margin-top: 20px;
}
#thumbnailImage {
max-width: 100%;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
JavaScript (script.js):
javascript
Copy code
document.getElementById('downloadButton').addEventListener('click', () => {
const youtubeURL = document.getElementById('youtubeURL').value;
const videoId = extractVideoId(youtubeURL);
const thumbnailURL = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
document.getElementById('thumbnailImage').src = thumbnailURL;
});
function extractVideoId(url) {
let videoId = url.split('v=')[1];
const ampersandPosition = videoId.indexOf('&');
if (ampersandPosition !== -1) {
videoId = videoId.substring(0, ampersandPosition);
}
return videoId;
}
