https://www.highratecpm.com/zwpwkmuy0?key=e08a35b46ab52642bf03053c9ef467a2
YouTube Thumbnail Downloader
YouTube Thumbnail Downloader
CSS (styles.css)
css
Copy code
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
color: #333;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 600px;
width: 100%;
}
h1 {
color: #ff5722;
text-align: center;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
label {
font-weight: bold;
}
input {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
padding: 10px;
background: #ff5722;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #e64a19;
}
#thumbnail-result {
margin-top: 20px;
text-align: center;
}
#thumbnail-result img {
max-width: 100%;
border-radius: 8px;
}
#download-link {
display: inline-block;
margin-top: 10px;
padding: 10px;
background: #4caf50;
color: #fff;
text-decoration: none;
border-radius: 4px;
}
#download-link:hover {
background: #388e3c;
}
.hidden {
display: none;
}
JavaScript (script.js)
javascript
Copy code
document.getElementById('thumbnail-form').addEventListener('submit', function(event) {
event.preventDefault();
const url = document.getElementById('video-url').value;
const videoId = getVideoId(url);
if (videoId) {
const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
document.getElementById('thumbnail').src = thumbnailUrl;
document.getElementById('download-link').href = thumbnailUrl;
document.getElementById('thumbnail-result').classList.remove('hidden');
} else {
alert('Invalid YouTube URL');
}
});
function getVideoId(url) {
const urlParts = url.split('v=');
if (urlParts.length > 1) {
const videoId = urlParts[1].split('&')[0];
return videoId;
}
return null;
}
No comments:
Post a Comment