Model: llama3.3:latest
produce HTML with embedded CSS and JavaScript - no react, no dependencies - for an app that takes a URL to a YouTube video and outputs images along with visible URLs for all known thumbnails for that video
Below is a simple HTML page that embeds CSS and JavaScript to achieve the functionality you described. This example does not use any external libraries or frameworks like React, and it only relies on native browser capabilities.
The app works by taking a YouTube video URL as input, parsing it to extract the video ID, and then using that ID to generate thumbnail URLs according to YouTube's standard thumbnail URL patterns. Note that this approach might not cover every possible thumbnail size or format that YouTube offers, but it should give you access to several common ones.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>YouTube Thumbnail Extractor</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
#thumbnails {
display: flex;
flex-wrap: wrap;
}
.thumbnail {
margin: 10px;
}
img {
max-width: 150px;
max-height: 150px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>YouTube Thumbnail Extractor</h2>
<input type="text" id="youtubeUrl" placeholder="Enter YouTube video URL">
<button onclick="extractThumbnails()">Extract Thumbnails</button>
<div id="thumbnails"></div>
<script>
function extractThumbnails() {
const youtubeUrl = document.getElementById('youtubeUrl').value;
const videoId = getYoutubeVideoId(youtubeUrl);
if (!videoId) {
alert("Could not parse YouTube video ID from the URL.");
return;
}
const thumbnailSizes = ['default', 'mqdefault', 'hqdefault', 'sddefault', 'maxresdefault'];
const thumbnailsDiv = document.getElementById('thumbnails');
thumbnailsDiv.innerHTML = ''; // Clear previous results
thumbnailSizes.forEach(size => {
const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/${size}.jpg`;
const img = document.createElement('img');
img.src = thumbnailUrl;
img.alt = `${size} thumbnail`;
img.className = 'thumbnail';
const link = document.createElement('a');
link.href = thumbnailUrl;
link.text = size;
link.style.display = 'block';
const div = document.createElement('div');
div.appendChild(img);
div.appendChild(link);
thumbnailsDiv.appendChild(div);
});
}
function getYoutubeVideoId(url) {
const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
const match = url.match(regExp);
return (match && match[7].length == 11) ? match[7] : false;
}
</script>
</body>
</html>To use this code, simply copy and paste it into a file with an .html extension and open that file in your web browser. Enter the URL of a YouTube video into the input field and click "Extract Thumbnails." The page will then display images of the thumbnails along with their corresponding URLs.
Note: This example does not handle errors like network failures or cases where the thumbnail images are not available. Depending on your needs, you might want to add additional error checking and handling code.