YouTube Thumbnail Downloader
Creating a YouTube Thumbnail Downloader Tool using HTML, CSS, and JavaScript is a great project! Below is a simple implementation that allows users to input a YouTube video URL, extracts the video ID, and then displays the available thumbnail images for download.
HTML Structure
```html
YouTube Thumbnail Downloader
```
### CSS Styling (styles.css)
```css
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 0;
padding: 0;
}
.container {
text-align: center;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 400px;
}
h1 {
color: #333;
}
input[type="text"] {
width: 80%;
padding: 10px;
margin: 20px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
button {
padding: 10px 15px;
background-color: #FF0000; /* YouTube Red */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #C00000; /* Darker Red */
}
.thumbnails {
margin-top: 20px;
}
.thumbnail {
margin: 10px;
}
.thumbnail img {
max-width: 100%;
border-radius: 5px;
}
```
### JavaScript Functionality (script.js)
```javascript
document.getElementById('fetch-thumbnail').addEventListener('click', function() {
const videoUrl = document.getElementById('video-url').value;
const videoId = extractVideoId(videoUrl);
if (videoId) {
displayThumbnails(videoId);
} else {
alert('Please enter a valid YouTube video URL.');
}
});
function extractVideoId(url) {
const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^&\n]{11})/;
const matches = url.match(regex);
return matches ? matches[1] : null;
}
function displayThumbnails(videoId) {
const thumbnailsContainer = document.getElementById('thumbnails');
thumbnailsContainer.innerHTML = '';
const thumbnailSizes = [
{ size: 'Default', url: `https://img.youtube.com/vi/${videoId}/default.jpg` },
{ size: 'Medium', url: `https://img.youtube.com/vi/${videoId}/mqdefault.jpg` },
{ size: 'High', url: `https://img.youtube.com/vi/${videoId}/hqdefault.jpg` },
{ size: 'Max', url: `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg` }
];
thumbnailSizes.forEach(thumbnail => {
const thumbnailDiv = document.createElement('div');
thumbnailDiv.classList.add('thumbnail');
const img = document.createElement('img');
img.src = thumbnail.url;
img.alt = `${thumbnail.size} Thumbnail`;
const link = document.createElement('a');
link.href = thumbnail.url;
link.download = `${videoId}_${thumbnail.size}.jpg`;
link.appendChild(img);
const caption = document.createElement('p');
caption.textContent = `${thumbnail.size} Thumbnail`;
thumbnailDiv.appendChild(link);
thumbnailDiv.appendChild(caption);
thumbnailsContainer.appendChild(thumbnailDiv);
});
}
```
Explanation
1. **HTML**: The structure includes a title, an input field for the YouTube video URL, a button to fetch the thumbnail, and a container to display the thumbnails.
2. **CSS**: The styles are designed to create a visually appealing layout with a focus on usability. The button is styled in YouTube red, and thumbnail images are responsive.
3. **JavaScript**:
- The script listens for a button click, extracts the video ID from the URL, and generates the thumbnail URLs.
- It uses a regex to match the video ID from the provided URL and constructs different thumbnail sizes for display.
- Each thumbnail is presented as a clickable image that allows users to download it.
Running the Tool
1. Create three files: `index.html`, `styles.css`, and `script.js`.
2. Copy the respective code snippets into these files.
3. Open `index.html` in a web browser to see the tool in action!
This is a basic implementation and can be enhanced further with features such as error handling, improved styling, or even integration with APIs for advanced functionalities.
Comments
Post a Comment