Get youtube video id from url javascript

Asked
Active3 hr before
Viewed126 times

7 Answers

javascriptyoutubevideo
90%

Get the YouTube, Vimeo, Vine, VideoPress, TikTok, Microsoft Stream and Dailymotion video id from a url or embed string,,The url (or embed code) from which you want to find the video id

Example_snippet/controller/utility/_javascript.js/ $ npm install --save get-video. . .
$ npm install--save get - video - id
Step 2 continued with const getVideoId = require('ge. . .
const getVideoId = require('get-video-id');
Step 3 continued with import getVideoId from 'get-vi. . .
import getVideoId from 'get-video-id';
Step 4 continued with <script src="https://cdn.jsdel. . .
<script src="https://cdn.jsdelivr.net/npm/get-video-id/dist/get-video-id.min.js"></script>
Step 5 continued with import getVideoId from 'get-vi. . .
import getVideoId from 'get-video-id';

getVideoId('https://www.youtube.com/watch?v=8rSH8-pbHZ0');
//=> { id: '8rSH8-pbHZ0', service: 'youtube' }

const {
   id
} = getVideoId('https://www.youtube.com/watch?v=8rSH8-pbHZ0');
//=> '8rSH8-pbHZ0'
Step 6 continued with getVideoId('https://www.google. . .
getVideoId('https://www.google.cz/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0ahUKEwj30L2MvpDVAhUFZVAKHb8CBaYQuAIIIjAA&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DeG1uDU0rSLw&usg=AFQjCNECyDn3DQL7U6VW2CnXQQjB0gNKqA');
//=> { id: 'eG1uDU0rSLw', service: 'youtube' }
Step 7 continued with { id: 'String', service: '. . .
{
   id: 'String',
   service: 'String'
}
Step 8 continued with http://youtu.be/*? https://you. . .
http: //youtu.be/*?
   https: //youtu.be/*
   http: //youtu.be/*
   http: //y2u.be/*
   youtube: //
Step 9 continued with http://www.youtube.com/v/* htt. . .
http: //www.youtube.com/v/*
   http: //youtube.com/vi/*?
   http: //youtube.com/v/*?
Step 10 continued with http://www.youtube.com/ytscree. . .
http: //www.youtube.com/ytscreeningroom?v=*
   http: //www.youtube.com/watch?v=*?&
   https: //www.youtube.com/watch?v=*
   http: //youtube.com/watch?vi=*&
   http: //youtube.com/?vi=*&
   http: //youtube.com/?v=*
Step 11 continued with https://i.ytimg.com/vi/*/hqdef. . .
https: //i.ytimg.com/vi/*/hqdefault.jpg
   https: //i.ytimg.com/an_webp/MYDcdp-VNmQ/mqdefault_6s.webp
Step 12 continued with http://www.youtube.com/embed/*. . .
http: //www.youtube.com/embed/*?
   https: //www.youtube.com/embed/*
Step 13 continued with http://www.youtube.com/user/us. . .
http: //www.youtube.com/user/username#p/a/u/2/*
   http: //www.youtube.com/user/username#p/u/1/*?
   http: //www.youtube.com/user/username#p/u/1/*
Step 14 continued with <iframe width="560" height="31. . .
<iframe width="560" height="315" src="https://www.youtube.com/embed/*" frameborder="0" allowfullscreen></iframe>
Step 15 continued with www.youtube-nocookie.com/embed. . .
www.youtube - nocookie.com / embed
/*?
Step 16 continued with http://www.youtube.com/attribu. . .
http: //www.youtube.com/attribution_link?u=%2Fwatch%3Fv%3D*%26
   http: //www.youtube.com/attribution_link?u=%2Fwatch%3Fv%3D
   http: //www.youtube.com/attribution_link?u=/watch?v=*&
   http: //www.youtube.com/attribution_link?u=/watch?v=*
   http: //www.youtube.com/attribution_link?/watch?v=*
Step 17 continued with https://google.cz/url?source=w. . .
https://google.cz/url?source=web&url=<YOUTUBE_URL>
   https://google.com/image?url=<YOUTUBE_URL>
Step 18 continued with https://vimeo.com/* https://vi. . .
https: //vimeo.com/*
   https: //vimeo.com/*?
   https: //player.vimeo.com/video/*
   https: //player.vimeo.com/video/*?
   https: //www.vimeo.com/*
   https: //www.vimeo.com/*?
Step 19 continued with http://vimeo.com/foo.swf?clip_. . .
http: //vimeo.com/foo.swf?clip_id=1234
Step 20 continued with https://vimeo.com/event/* . . .
https: //vimeo.com/event/*
Step 21 continued with <iframe src="https://player.vi. . .
< iframe src = "https://player.vimeo.com/video/*"...
Step 22 continued with https://vine.co/v/* . . .
https: //vine.co/v/*
Step 23 continued with <iframe src="https://vine.co/v. . .
<iframe src="https://vine.co/v/*/embed/simple" width="600" height="600" frameborder="0"></iframe>
<iframe src="https://vine.co/v/*/embed/postcard" width="600" height="600" frameborder="0"></iframe>
Step 24 continued with https://videopress.com/v/* htt. . .
https: //videopress.com/v/*
   https: //videopress.com/embed/*
Step 25 continued with <iframe src="https://videopres. . .
<iframe src="https://videopress.com/embed/zcnJVzQF" width="600" height="600"></iframe>
Step 26 continued with https://web.microsoftstream.co. . .
https: //web.microsoftstream.com/video/*
   https: //web.microsoftstream.com/embed/video/*
Step 27 continued with <iframe src="https://web.micro. . .
<iframe src="https://web.microsoftstream.com/embed/video/*?&" width="640" height="360"></iframe>
Step 28 continued with https://www.tiktok.com/*/video. . .
https: //www.tiktok.com/*/video/*
   https: //www.tiktok.com/*/video/*?
Step 29 continued with http://www.dailymotion.com/vid. . .
http: //www.dailymotion.com/video/*_text
   http: //www.dailymotion.com/video/*
   http: //www.dailymotion.com/fr/relevance/search/search+query/1#video=*
   https: //www.dailymotion.com/video/*?playlist=
   http: //dai.ly/*
Step 30 continued with <iframe src="https://www.daily. . .
<iframe src="https://www.dailymotion.com/embed/video/*" width="600" height="600"></iframe>
load more v
88%

Thanks for this! May need to change the else,

Example_snippet/controller/utility/_javascript.js/ function YouTubeGetID(url){ . . .
function YouTubeGetID(url) {
   url = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
   return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
}
load more v
72%

You can use the following code to get the YouTube video ID from a URL:, Meta Stack Overflow ,Or any other YouTube format that contains a video ID in the URL,,This can get video id from any type of youtube links

Example_snippet/controller/utility/_javascript.js/ <script type="text/javascript". . .
<script type="text/javascript">
function youtube_parser(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>
Step 2 continued with http://www.youtube.com/watch?v. . .
http: //www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index
   http: //www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/QdK8U-VIH_o
   http: //www.youtube.com/v/0zM3nApSvMg?fs=1&amp;hl=en_US&amp;rel=0
   http: //www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s
   http: //www.youtube.com/embed/0zM3nApSvMg?rel=0
   http: //www.youtube.com/watch?v=0zM3nApSvMg
   http: //youtu.be/0zM3nApSvMg
load more v
65%

(and optionally any other short URL’s which the script automatically detects whether it contains a youtube video),http(s)://www,youtube

Example_snippet/controller/utility/_javascript.js/ var url = "..."; var videoid =. . .
var url = "...";
var videoid = url.match(/(?:https?:/ {
2
}) ? ( ? : w {
3
}.) ? youtu( ? : be)?.( ? : com | be)( ? : /watch?v=|/)([ ^ s & ] + ) / );
if (videoid != null) {
   console.log("video id = ", videoid[1]);
} else {
   console.log("The youtube url is not valid.");
}
load more v
75%

Given a Youtube Video URL, The job is to get the Video ID from the URL using JavaScript, Here are few methods discussed

Example_snippet/controller/utility/_javascript.js/ string.split(separator, limit). . .
string.split(separator, limit)
load more v
40%

Extract YouTube video ID from URL,See the Pen Extract YouTube video ID from URL by Jon Catmull (@catmull) on CodePen,,Just include the JavaScript code below and then add the appropriate class to the text input field

Example_snippet/controller/utility/_youtube.js/ $('.js-youtube-vid').on('chan. . .
$('.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', ''));
   }
});
load more v
22%

Example_snippet/controller/utility/_youtube.js/ // true when ID is found, fals. . .
// true when ID is found, false otherwise. 
//Extracts youtube ID
<script type="text/javascript">
function youtube_parser(url){
    var regExp = /^https?\:\/\/(?:www\.youtube(?:\-nocookie)?\.com\/|m\.youtube\.com\/|youtube\.com\/)?(?:ytscreeningroom\?vi?=|youtu\.be\/|vi?\/|user\/.+\/u\/\w{1,2}\/|embed\/|watch\?(?:.*\&)?vi?=|\&vi?=|\?(?:.*\&)?vi?=)([^#\&\?\n\/<>"']*)/i;
    var match = url.match(regExp);
    return (match && match[1].length==11)? match[1] : false;
}
</script>