我创建了一个功能，测试用户输入的Youtube, Soundcloud或Vimeo嵌入ID的，能够创建一个更连续的设计与嵌入式媒体。这个函数检测并返回一个有两个属性的对象:"type"和"id"。Type可以是“youtube”，“vimeo”或“soundcloud”，“id”属性是唯一的媒体id。

在网站上，我使用了一个文本区域转储，用户可以在其中粘贴任何类型的链接或嵌入代码，包括vimeo和youtube的iframe嵌入。

function testUrlForMedia(pastedData) {
var success = false;
var media   = {};
if (pastedData.match('http://(www.)?youtube|youtu\.be')) {
    if (pastedData.match('embed')) { youtube_id = pastedData.split(/embed\//)[1].split('"')[0]; }
    else { youtube_id = pastedData.split(/v\/|v=|youtu\.be\//)[1].split(/[?&]/)[0]; }
    media.type  = "youtube";
    media.id    = youtube_id;
    success = true;
}
else if (pastedData.match('http://(player.)?vimeo\.com')) {
    vimeo_id = pastedData.split(/video\/|http:\/\/vimeo\.com\//)[1].split(/[?&]/)[0];
    media.type  = "vimeo";
    media.id    = vimeo_id;
    success = true;
}
else if (pastedData.match('http://player\.soundcloud\.com')) {
    soundcloud_url = unescape(pastedData.split(/value="/)[1].split(/["]/)[0]);
    soundcloud_id = soundcloud_url.split(/tracks\//)[1].split(/[&"]/)[0];
    media.type  = "soundcloud";
    media.id    = soundcloud_id;
    success = true;
}
if (success) { return media; }
else { alert("No valid media id detected"); }
return false;
}

这是一个稍作改动的版本:

var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]{11,11}).*/;
var match = url.match(regExp);
if (match) if (match.length >= 2) return match[2];
// error

这假设代码总是11个字符。 我在ActionScript中使用这个，不确定在Javascript中是否支持{11,11}。还增加了对&v=....的支持(以防万一)

稍微严格一点的版本:

^https?://(?:www\.)?youtu(?:\.be|be\.com)/(?:\S+/)?(?:[^\s/]*(?:\?|&)vi?=)?([^#?&]+)

测试:

http://www.youtube.com/user/dreamtheater#p/u/1/oTJRivZTMLs
https://youtu.be/oTJRivZTMLs?list=PLToa5JuFMsXTNkrLJbRlB--76IAOjRM9b
http://www.youtube.com/watch?v=oTJRivZTMLs&feature=youtu.be
https://youtu.be/oTJRivZTMLs
http://youtu.be/oTJRivZTMLs&feature=channel
http://www.youtube.com/ytscreeningroom?v=oTJRivZTMLs
http://www.youtube.com/embed/oTJRivZTMLs?rel=0
http://youtube.com/v/oTJRivZTMLs&feature=channel
http://youtube.com/v/oTJRivZTMLs&feature=channel
http://youtube.com/vi/oTJRivZTMLs&feature=channel
http://youtube.com/?v=oTJRivZTMLs&feature=channel
http://youtube.com/?feature=channel&v=oTJRivZTMLs
http://youtube.com/?vi=oTJRivZTMLs&feature=channel
http://youtube.com/watch?v=oTJRivZTMLs&feature=channel
http://youtube.com/watch?vi=oTJRivZTMLs&feature=channel

这是一个完全不同的解决方案。

你可以从“https://www.youtube.com/oembed?format=json&url=”请求JSON oEmbed文档。rawurlencode($url)，然后thumbnail_url有一个固定的格式，匹配一个PCRE模式，如https://i.ytimg.com/vi/([^/]+)，第一组是YouTube ID。

这里有一个最短和最简单的正则表达式

url = url+'&'    
regex = "v=(.*?)&|youtu.be\/(.*?)&"

/^https?:\/\/(?:(?:youtu\.be\/)|(?:(?:www\.)?youtube\.com\/(?:(?:watch\?(?:[^&]+&)?vi?=)|(?:vi?\/)|(?:shorts\/))))([a-zA-Z0-9_-]{11,})/i

下面是一个优化的正则表达式，它可以找到视频id，并准确地遵循YouTube oEmbed对embed url的定义。您可以在这里看到我与测试url的匹配:https://regex101.com/r/q4mWg1/1

它故意不匹配协议相对url(//而不是https://)和youtu-nocookie.com url，因为这些不在oEmbed定义中，从而降低了性能。

你可以在这里查看oEmbed规范: https://oembed.com/

官方提供商的定义，包括YouTube的定义，在这里:https://oembed.com/providers.json

我发现这在Wordpress网站上非常有用，我需要在帖子内容中匹配oEmbed url。