Javascript Project to Extract Youtube Video ID From URL in Browser Full Project For Beginners

 

 

index.html

 

 

<label for="youtube-id">Enter youtube video URL:</label>
<input id="youtube-id" type="text" class="js-youtube-vid" placeholder="YSuo0j2xsj8">

<p>Types of URL supported:</p>
<ul>
  <li>https://www.youtube.com/watch?v=YSuo0j2xsj8</li>
  <li>http://youtu.be/YSuo0j2xsj8</li>
  <li>www.youtube.com/embed/YSuo0j2xsj8</li>
</ul>


* {
  font-family: 'Roboto', sans-serif;
}
label {
  font-size: 20px;
  margin:10px;
}
input {
  width: 550px;
  font-size: 20px;
  margin:10px;
}


$('.js-youtube-vid').on('change', function(){

        var newval = '',
            $this = $(this);

        if (newval = $this.val().match(/(\?|&)v=([^&#]+)/)) {

            $this.val(newval.pop());

        } else if (newval = $this.val().match(/(\.be\/)+([^\/]+)/)) {

            $this.val(newval.pop());

        } else if (newval = $this.val().match(/(\embed\/)+([^\/]+)/)) {

            $this.val(newval.pop().replace('?rel=0',''));

        }

    });

Leave a Reply