DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Techsolutionstuff
Techsolutionstuff

Posted on • Originally published at techsolutionstuff.com

How To Download Youtube Video Using jQuery

In this article, we will see how to download youtube videos using jquery or how to download youtube videos from a source. Also, we will use loader API to download free youtube videos. It's very simple to download youtube videos from sources. you need to just enter the youtube video URL and select quality to download the youtube video.

So, let's see, youtube video download using jquery, how to download youtube videos using javascript.

<!DOCTYPE html>
<html>
<head>
  <title>How To Download Youtube Video Using jQuery - Techsolutionstuff</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
</head>
<body class="bg-light">
  <div class="col-md-7 offset-md-3 mt-5">
    <div class="card">
      <div class="card-header bg-dark">
        <h5 style="color:white">How To Download Youtube Video Using jQuery - Techsolutionstuff</h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group">
              <label class="text-weight"><b>Enter Video Link :</b></label>
              <input type="txt" name="link" class="form-control link" required>
            </div>
          </div>
        </div>
        <form class="form-download mt-3">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <label class="text-weight"><b>Select Video Formate :</b></label>
                <select class="form-control formte" required>
                  <option selected disabled>Select Video Formate</option> 
                  <option value="mp4a">144p Mp4</option>
                  <option value="360">360p Mp4</option>
                  <option value="480">480p Mp4</option>
                  <option value="720">720p Mp4</option>
                  <option value="1080">1080p Mp4</option>
                </select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="form-group mt-4 download-video">
                <button class="btn btn-success btn-block click-btn-down" type="submit">Click Here</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</body>
<script type="text/javascript">
  $(".click-btn-down").click(function(){
    var link = $(".link").val();
    var formate = $(".formte").children("option:selected").val();
    var src =""+link+"="+formate+"";
    downloadVideo(link,formate);
  });
  function downloadVideo(link,formate) {
      $('.download-video').html('<iframe style="width:100%;height:60px;border:0;overflow:hidden;" scrolling="no" src="https://loader.to/api/button/?url='+link+'&f='+formate+'"></iframe>');
  }
</script>
</html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Classic DEV Post from 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!