Build a Youtube Thumbnail Downloader From URL in Browser Using Javascript

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube Thumbnail Downloader</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .thumbnail-image {
            max-width: 100%;
            max-height: 300px;
            margin: 20px 0;
        }
    </style>
</head>
<body class="bg-gray-100 p-6">

    <div class="max-w-lg mx-auto bg-white p-6 rounded-md shadow-md text-center">
        <h1 class="text-2xl font-bold mb-4">YouTube Thumbnail Downloader</h1>
        <input type="text" id="video-url" class="border border-gray-300 p-2 rounded w-full" placeholder="Enter YouTube Video URL" required>
        <button id="fetch-thumbnail" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">
            Get Thumbnail
        </button>
        
        <div id="thumbnail-container" class="hidden mt-6">
            <h2 class="text-lg font-bold mb-2">Thumbnail:</h2>
            <img id="thumbnail-image" class="thumbnail-image" src="" alt="Thumbnail">
            <a id="download-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4 hidden" download>
                Download Thumbnail
            </a>
        </div>
    </div>

    <script>
        document.getElementById('fetch-thumbnail').addEventListener('click', function() {
            const videoUrl = document.getElementById('video-url').value;
            const videoId = getVideoId(videoUrl);

            if (videoId) {
                const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
                displayThumbnail(thumbnailUrl);
            } else {
                alert('Please enter a valid YouTube video URL.');
            }
        });

        function getVideoId(url) {
            const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
            const match = url.match(regex);
            return match ? match[1] : null;
        }

        function displayThumbnail(url) {
            const thumbnailImage = document.getElementById('thumbnail-image');
            const downloadButton = document.getElementById('download-button');
            const thumbnailContainer = document.getElementById('thumbnail-container');

            thumbnailImage.src = url;
            thumbnailImage.onload = function() {
                thumbnailContainer.classList.remove('hidden');
                downloadButton.href = url;
                downloadButton.classList.remove('hidden');
            };
        }
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>YouTube Thumbnail Downloader</title>

<style>

.thumbnail-image {

max-width: 100%;

max-height: 300px;

margin: 20px 0;

}

</style>

</head>

<h1 class="text-2xl font-bold mb-4">YouTube Thumbnail Downloader</h1>

Get Thumbnail

</button>

<h2 class="text-lg font-bold mb-2">Thumbnail:</h2>

Download Thumbnail

</a>

</div>

document.getElementById('fetch-thumbnail').addEventListener('click', function() {

const videoUrl = document.getElementById('video-url').value;

const videoId = getVideoId(videoUrl);

if (videoId) {

const thumbnailUrl = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;

displayThumbnail(thumbnailUrl);

} else {

alert('Please enter a valid YouTube video URL.');

}

});

function getVideoId(url) {

const regex = /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;

const match = url.match(regex);

return match ? match[1] : null;

}

function displayThumbnail(url) {

const thumbnailImage = document.getElementById('thumbnail-image');

const downloadButton = document.getElementById('download-button');

const thumbnailContainer = document.getElementById('thumbnail-container');

thumbnailImage.src = url;

thumbnailImage.onload = function() {

thumbnailContainer.classList.remove('hidden');

downloadButton.href = url;

downloadButton.classList.remove('hidden');

};

}

</script>

</body>

</html>

Build a Youtube Thumbnail Downloader From URL in Browser Using Javascript

Comments

Leave a Reply Cancel reply

Archives