thumbnail AI

In this code, we have a simple form with an input field to enter the YouTube video URL and a button to get the thumbnail. The thumbnail is displayed below the button. If there is an error, an error message is shown.

To style the form and the page, we have used some CSS. Bootstrap classes are utilized for responsive styling and a clean layout.

The JavaScript code handles the logic for extracting the video ID from the URL and fetching the YouTube thumbnail using the Axios library. If there is an error during the process, an appropriate error message is displayed.

Remember to save the code in an HTML file and open it in a web browser to see the tool in action

<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

  <style>

    body {

      background-color: #f8f9fa;

      padding-top: 5rem;

    }

    

    .container {

      max-width: 600px;

    }

    

    .thumbnail-form {

      background-color: #ffffff;

      padding: 2rem;

      border-radius: 0.5rem;

      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    }

    

    .thumbnail-img {

      max-width: 100%;

    }

    

    .error-message {

      color: #dc3545;

    }

  </style>

</head>

<body>

  <div class="container">

    <div class="thumbnail-form">

      <h1>YouTube Thumbnail Downloader</h1>

      <div class="mb-3">

        <label for="video-url" class="form-label">Enter YouTube Video URL</label>

        <input type="text" id="video-url" class="form-control" placeholder="https://www.youtube.com/watch?v=VIDEO_ID">

        <div class="error-message" id="error-message"></div>

      </div>

      <button class="btn btn-primary" onclick="getThumbnail()">Get Thumbnail</button>

      <div class="mt-4">

        <img src="" id="thumbnail-img" class="thumbnail-img">

      </div>

    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script>

    function getThumbnail() {

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

      const thumbnailImg = document.getElementById('thumbnail-img');

      const errorMessage = document.getElementById('error-message');

      

      const videoUrl = videoUrlInput.value.trim();

      

      if (videoUrl === '') {

        errorMessage.textContent = 'Please enter a valid YouTube video URL.';

        thumbnailImg.src = '';

        return;

      }

      

      const videoId = extractVideoId(videoUrl);

      

      if (videoId === null) {

        errorMessage.textContent = 'Invalid YouTube video URL.';

        thumbnailImg.src = '';

        return;

      }

      

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

      

      axios.get(thumbnailUrl)

        .then(response => {

          thumbnailImg.src = response.config.url;

          errorMessage.textContent = '';

        })

        .catch(error => {

          errorMessage.textContent = 'Failed to fetch the thumbnail.';

          thumbnailImg.src = '';

        });

    }

    

    function extractVideoId(url) {

      const videoIdRegex = /(?:[?&]v=|\/embed\/|\/v\/|\.be\/|\/user\/\w+\/|u\/\w+\/|embed\/|youtu.be\/|\/v=|\.be\/|\/u\/\w+\/|watch\?v=|\&v=|^youtu.be\/)([^#\&\?]*).*/;

      const match = url.match(videoIdRegex);

      return match && match[1].length === 11 ? match[1] : null;

    }

  </script>

</body>

</html>