Javascript Project to Build a Youtube Video URL Shortener in Browser Using Bootstrap4 & HTML5 Full Project For Beginners

 

 

index.html

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Youtube URL Shortener</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

</head>
<body>
  <div class="container">
    <h1 class="text-center">
      Youtube URL Shortener
    </h1>
    <form id="form">
      <div class="form-group">
        <input type="text" class="form-control" id="url" placeholder="Enter Youtube Video URL" required>
      </div>
      <div class="form-group">
        <button class="btn btn-danger btn-block">
          Shorten Youtube URL
        </button>
      </div>
    </form>
    <div id="result">
      <div class="form-group">
        <input type="text" id="output" placeholder="Shorten URL" class="form-control text-center">
      </div>
    </div>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  $("#form").submit((e) => {
    e.preventDefault()
    var url = $("#url").val()
    shortenUrl(url)
  })
  function shortenUrl(url){
     $("#output").val(`
     
     https://youtu.be/${getvideoId(url)}
     
     `)
  }

  function getvideoId(url){
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
    var match = url.match(regExp);
    return (match&&match[7].length==11)? match[7] : false;
  }
</script>
</html>

Leave a Reply