Youtube Videos Downloader Source code Using HTML, CSS, JavaScript

Blogger, the popular platform for creating and publishing blogs, has revolutionized the way people share information and connect with others online. Similarly, YouTube, the world’s largest video-sharing platform, has become an essential source of information and entertainment. Bloggers often embed YouTube videos in their blog posts to enhance their content, but what if they want to download these videos for future use? This is where a Blogger YouTube video downloader comes in handy.

A Blogger YouTube video downloader is a software or website that allows bloggers to download YouTube videos and add them to their blog posts. This is a useful tool for bloggers who want to include high-quality video content in their posts but don’t want to embed the videos directly from YouTube. With a video downloader, they can download the videos they want to use and then upload them to their blog.

There are many benefits to using a Blogger YouTube video downloader. The most significant advantage is that it allows bloggers to add high-quality videos to their blog posts. This can help to make their content more engaging and informative, and increase engagement with their audience.

Another advantage of using a Blogger YouTube video downloader is that it allows bloggers to keep a copy of their favorite videos. YouTube videos can sometimes be removed by their creators, so having a copy of the video on their device ensures that they can use it whenever they want, even if it is no longer available on YouTube.

Moreover, using a Blogger YouTube video downloader saves time for bloggers. Instead of going through the process of embedding videos directly from YouTube, bloggers can simply download the videos and then upload them to their blog. This can be particularly useful for bloggers who are creating long-form content or a series of posts that require several videos.

There are many different types of Blogger YouTube video downloader software available, and some are free while others require payment. It is important to choose a reputable software that is safe and virus-free. Many free software comes with ads, which can be intrusive, so bloggers should be cautious while downloading such software.

It is essential to note that downloading YouTube videos without permission is against YouTube’s terms of service, and it could result in legal action against the downloader. Therefore, bloggers should be cautious and make sure that they have the right to download the content before proceeding.

In conclusion, a Blogger YouTube video downloader is a valuable tool for bloggers who want to add high-quality video content to their blog posts. It saves time, allows bloggers to keep their favorite content, and provides the flexibility to use videos as per their requirements. However, bloggers should be aware of the legal and safety risks involved in downloading videos without permission. To ensure a safe and legal experience, bloggers should choose a reputable software, be aware of the risks involved, and only download videos they have permission to download.

In short, a Blogger YouTube video downloader is an essential tool for bloggers who want to enhance their blog posts with high-quality video content. With this tool, bloggers can download their favorite videos and upload them to their blog posts, making their content more engaging and informative. However, they should be cautious and use the tool legally and safely, keeping the terms of service in mind.

HTML code

 
<div class="from">
    <h1>YouTube Video Downloader</h1>
    <div class="result1">
      <span>🔗 Enter Your YouTube Video Url</span>
    </div>
    <input type="text" class="link YouTube" placeholder="Enter Your YouTube Url..." />
    <select class="format" required onchange="Getdownload()">
      <option disabled selected="">Select Video Option</option>
      <option value="Thumbnail">Download Video Thumbnail</option>
      <option disabled>Select Song format</option>
      <option value="mp3">Mp3</option>
      <option value="m4a">M4A</option>
      <option disabled>Select Video format</option>
      <option value="360">360p</option>
      <option value="480">480p</option>
      <option value="720">720p</option>
      <option value="1080">1080p</option>
      <option value="4k">4k</option>
      <option value="8k">8k</option>
    </select>
    <div class="hidden">
      <input type="text" name="type" class="link Idurl" hidden>
      <input type="url" name="url" class="link form-control" hidden>
      <div class="result2"></div>
    </div>
  </div>

CSS code

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  font-family: sans-serif;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  min-height: 100vh;
  background-color: #FFF;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/bg.webp');
}

.from {
  background: white;
  box-shadow: 0px 0px 10px #21BF73;
  padding: 20px;
  width: 315px;
  border-radius: 5px;
}

h1 {
  text-align: center;
  font-size: 18px;
  color: #21BF73;
}

.result1 {
  border-radius: 1px;
  height: 190px;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px dashed #21BF73;
  margin-top: 10px;
}

.result1.active {
  border: none;
  display: block;
}

.result1 .thumbnail {
  width: 100%;
  height: 100%;
  border-radius: 1px;
}

.result1.active span {
  display: none;
}

.result1 span {
  color: #21BF73;
  margin-top: 10px;
  text-align: center;
  font-size: 20px;
}

.link {
  width: 300px;
  height: 30px;
  margin-top: 15px;
  text-align: center;
  border: 2px solid #21BF73;
  border-radius: 1px;
  padding: 5px;
  color: #21BF73;
}

.link::placeholder {
  color: #21BF73;
}

.format {
  width: 315px;
  height: 45px;
  margin-top: 15px;
  text-align: center;
  border: 2px solid #21BF73;
  border-radius: 1px;
  padding: 5px;
  color: #21BF73;
}

.Get {
  width: 100%;
  height: 45px;
  display: block;
  background-color: #21BF73;
  border: none;
  padding: 5px;
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  padding: 12px 25px;
  margin-top: 10px;
  border-radius: 1px;
  cursor: pointer;
  outline: none;
}

.hidden {
  display: none;
}

.hidden.active {
  display: block;
}

.result2 {
  margin-top: 10px;
}

JAVASCRIPT code

var YouTube = document.querySelector('.YouTube');
var format = document.querySelector('.format');
var hidden = document.querySelector('.hidden');
var Idurl = document.querySelector('.Idurl');
var result1 = document.querySelector('.result1');
var thumbnail = document.querySelector('thumbnail');

function preview() {
  if (YouTube.value.indexOf("https://youtu.be/") != -1) {
    var url1 = YouTube.value.replace("https://youtu.be/", "https://www.youtube.com/embed/");
    document.querySelector('.result1').innerHTML = ``
  }
  else if (YouTube.value.indexOf("https://www.youtube.com/watch?v=") != -1) {
    var url1 = YouTube.value.replace("https://www.youtube.com/watch?v=", "https://www.youtube.com/embed/");
    document.querySelector('.result1').innerHTML = ``;
  }
  else if (YouTube.value.indexOf("https://youtube.com/shorts/") != -1) {
    var url1 = YouTube.value.replace("https://youtube.com/shorts/", "https://www.youtube.com/embed/");
    var urlSe = url1.replace("?feature=share", "");
    document.querySelector('.result1').innerHTML = ``;
  }
}

function GetId() {
  if (YouTube.value != "") {
    if (YouTube.value.indexOf("https://youtu.be/") != -1) {
      var url1 = YouTube.value.replace("https://youtu.be/", "");
      document.querySelector('.Idurl').value = url1;
    }
    else if (YouTube.value.indexOf("https://www.youtube.com/watch?v=") != -1) {
      var url1 = YouTube.value.replace("https://www.youtube.com/watch?v=", "");
      document.querySelector('.Idurl').value = url1;
    }
    else if (YouTube.value.indexOf("https://youtube.com/shorts/") != -1) {
      var url1 = YouTube.value.replace("https://youtube.com/shorts/", "");
      var urlSe = url1.replace("?feature=share", "");
      document.querySelector('.Idurl').value = urlSe;
    }
  }
}

function Getdownload() {
  GetId();
  if (YouTube.value != "") {
    switch (format.value) {
      case "Thumbnail":
        hidden.classList.add('active');
        result1.classList.add('active');
        var url2 = `https://img.youtube.com/vi/${Idurl.value}/maxresdefault.jpg`;
        document.querySelector('.result1').innerHTML = ``;
        document.querySelector('.form-control').value = url2;
        document.querySelector('.result2').innerHTML = `Download Video Thumbnail`;
        break;
      case "mp3":
        hidden.classList.add('active');
        result1.classList.add('active');
        var url2 = `https://loader.to/api/button/?url=https://youtu.be/${Idurl.value}&f=mp3`;
        document.querySelector('.result2').innerHTML = ``;
        preview();
        break;
      case "m4a":
        hidden.classList.add('active');
        result1.classList.add('active');
        var url2 = `https://loader.to/api/button/?url=https://youtu.be/${Idurl.value}&f=m4a`;
        document.querySelector('.result2').innerHTML = ``;
        preview();
        break;
      case "360":
        hidden.classList.add('active');
        result1.classList.add('active');
        var url2 = `https://loader.to/api/button/?url=https://youtu.be/${Idurl.value}&f=360`;
        document.querySelector('.result2').innerHTML = ``;
        preview();
        break;
      case "480":
        hidden.classList.add('active');
        result1.classList.add('active');
        var url2 = `https://loader.to/api/button/?url=https://youtu.be/${Idurl.value}&f=480`;
        document.querySelector('.result2').innerHTML = ``;
        preview();
        break;
      case "720":
        hidden.classList.add('active');
        result1.classList.add('active');
        var url2 = `https://loader.to/api/button/?url=https://youtu.be/${Idurl.value}&f=720`;
        document.querySelector('.result2').innerHTML = ``;
        preview();
        break;
      case "1080":
        hidden.classList.add('active');
        result1.classList.add('active');
        var url2 = `https://loader.to/api/button/?url=https://youtu.be/${Idurl.value}&f=1080`;
        document.querySelector('.result2').innerHTML = ``;
        preview();
        break;
      case "4k":
        hidden.classList.add('active');
        result1.classList.add('active');
        var url2 = `https://loader.to/api/button/?url=https://youtu.be/${Idurl.value}&f=4k`;
        document.querySelector('.result2').innerHTML = ``;
        preview();
        break;
      case "8k":
        hidden.classList.add('active');
        result1.classList.add('active');
        var url2 = `https://loader.to/api/button/?url=https://youtu.be/${Idurl.value}&f=8k`;
        document.querySelector('.result2').innerHTML = ``;
        preview();
        break;
    }
  }
  else {
    alert('Enter Your YouTube Url');
  }
}
var url = document.querySelector('.form-control');
function download() {
  const anchor = document.createElement("a");
  anchor.href = url.value;
  anchor.download = 'MWC.jpg';
  document.body.appendChild(anchor);
  anchor.click();
  document.body.removeChild(anchor);
}