Create Download Thumbnail YouTube using Bootstrap and JavaScript

Hello Dev,

In this article, I will show you How to Create a Download Thumbnail from YouTube by using Bootstrap and JavaScript. I use YouTube Image API to get a Thumbnail. please follow as below code.

Step 1: Create a File HTML and follow as below code.

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Download YouTube Video Thumbnail</title>
      <link rel="stylesheet" href="styles.css">
      <link
         href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
         rel="stylesheet"
         integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
         crossorigin="anonymous">
      <link rel="stylesheet" href="styles.css">
      <link rel="stylesheet"
         href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
      <form action="" method="POST">
         <header>Download Thumbnail</header>
         <div class="url-input">
            <span class="title">Paste video url:</span>
            <div class="field">
               <input type="text" class="form-control" placeholder="Please Enter URL YouTube" required>
               <input class="hidden-input" type="hidden" name="imgurl">
               <span class="bottom-line"></span>
            </div>
         </div>
         <div class="preview-area">
            <img class="thumbnail" src="" alt="">
            <i class="icon fas fa-cloud-download-alt"></i>
            <span>Paste video url to see preview</span>
         </div>
         <button class="download-btn" type="submit" name="button">Download
            Thumbnail</button>
      </form>

      <script src="script.js"></script>
      <script
         src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
         crossorigin="anonymous"></script>
   </body>
</html>

Step 2: Create a File CSS to Design the Layout.

/* Import Google font - Poppins & Noto */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&family=Poppins:wght@400;500;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #7fc3d6;
}

/* ::selection{
  color: #fff;
  background: #7D2AE8;
} */
form {
  width: 450px;
  background: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 10px 10px 13px rgba(0, 0, 0, 0.1);
}

form header {
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  margin-top: 10px;
  color: #342ae8;
}

form .url-input {
  margin: 20px 0;
}

.url-input .title {
  font-size: 18px;
  color: #373737;
}

.url-input .field {
  margin-top: 5px;
  height: 40px;
  width: 100%;
  position: relative;
}

.url-input .field input::placeholder {
  color: #b3b3b3;
}

input.form-control:focus {
  box-shadow: none;
}

.url-input .field .bottom-line {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #7D2AE8;
  transform: scale(0);
  transition: transform 0.3s ease;
}

.url-input .field input:focus~.bottom-line,
.url-input .field input:valid~.bottom-line {
  transform: scale(1);
}

form .preview-area {
  border-radius: 5px;
  height: 220px;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px dashed #8e46ec;
}

.preview-area.active {
  border: none;
}

.preview-area .thumbnail {
  width: 100%;
  display: none;
  border-radius: 5px;
}

.preview-area.active .thumbnail {
  display: block;
}

.preview-area.active .icon,
.preview-area.active span {
  display: none;
}

.preview-area .icon {
  color: #8e46ec;
  font-size: 80px;
}

.preview-area span {
  color: #8e46ec;
  margin-top: 25px;
}

form .download-btn {
  color: #fff;
  height: 53px;
  width: 100%;
  outline: none;
  border: none;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  margin: 30px 0 20px 0;
  border-radius: 5px;
  background: #7D2AE8;
  pointer-events: none;
  transition: background 0.3s ease;
}

.download-btn:hover {
  background: #6616d0;
}

@media screen and (max-width: 460px) {
  body {
    padding: 0 20px;
  }

  form header {
    font-size: 24px;
  }

  .url-input .field,
  form .download-btn {
    height: 45px;
  }

  form .download-btn {
    font-size: 15px;
  }

  form .preview-area {
    height: 130px;
  }

  .preview-area .icon {
    font-size: 50px;
  }

  .preview-area span {
    margin-top: 10px;
    font-size: 12px;
  }
}

Step 3: Create a File JS to Create Action and to get a Thumbnail from YouTube.

const urlField = document.querySelector(".field input"),
    previewArea = document.querySelector(".preview-area"),
    imgTag = previewArea.querySelector(".thumbnail"),
    hiddenInput = document.querySelector(".hidden-input"),
    button = document.querySelector(".download-btn");

urlField.onkeyup = () => {
    let imgUrl = urlField.value;
    previewArea.classList.add("active");
    button.style.pointerEvents = "auto";
    if (imgUrl.indexOf("https://www.youtube.com/watch?v=") != -1) {
        let vidId = imgUrl.split('v=')[1].substring(0, 11);
        let ytImgUrl = `https://img.youtube.com/vi/${vidId}/maxresdefault.jpg`;
        imgTag.src = ytImgUrl;
    } else if (imgUrl.indexOf("https://youtu.be/") != -1) {
        let vidId = imgUrl.split('be/')[1].substring(0, 11);
        let ytImgUrl = `https://img.youtube.com/vi/${vidId}/maxresdefault.jpg`;
        imgTag.src = ytImgUrl;
    } else if (imgUrl.match(/\.(jpe?g|png|gif|bmp|webp)$/i)) {
        imgTag.src = imgUrl;
    } else {
        imgTag.src = "";
        button.style.pointerEvents = "none";
        previewArea.classList.remove("active");
    }
    hiddenInput.value = imgTag.src;
}

Create Download Thumbnail YouTube using Bootstrap and JavaScript

Post a Comment

Contact Form