Javascript 将youtube视频url转换为嵌入代码

我正在使用它将youtube url转换为嵌入url

text(t).html().replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com)\/(?:watch\?v=)?(.+)/g, '<iframe width="320" height="280" src="//www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>')

---

我倾向于简单地获取每个视频ID，并使用它来制定您喜欢的嵌入标记

函数getId（url）{ const regExp=/^.*（youtu.be\/|v\/|u\/\w\/|embed\/|watch\？v=&v=）（[^#和？]*）。/； const match=url.match（regExp）； 返回（匹配和匹配[2]。长度==11） ？匹配[2] ：null； } const videoId=getId（'http://www.youtube.com/watch?v=zbYf5_S7oJo'); 常量iframeMarkup=''； console.log（'Video ID:'，videoId）

函数popYouTubeId（buttonid）{
var youTubeUrl=$（buttonid.attr（'data-url'）；
var youTubeId；
var regExp=/^.*（youtu.be\/|v\/|u\/\w\/|embed\/|watch\？v=\&v=）（[^和\？]*）。/；
var match=youTubeUrl.match（regExp）；
if（match&&match[2]。长度==11）{
youTubeId=match[2]；
}否则{
youTubeId='未找到视频'；
}
$（'#ytvideo'）.html（'
我一直在使用这对函数将html块中的youtube链接从所见即所得编辑器转换为嵌入式iFrame

与其他解决方案一样，这仍然会损坏块中的其他html


在一个文本块中处理多个视频
使用http或https链接
使用视频的直接url
youtube.com/watch？v=UxSOKvlAbwI
和共享链接
youtu.be/UxSOKvlAbwI

代码：

createYoutubeEmbed=（键）=>{
返回“
”；
};
TransformYouTubeLink=（文本）=>{
如果（！text）返回文本；
const self=这个；
const linkreg=/（？：）
我很晚才回复，但这里是我用来转换youTube url以嵌入并使视频工作的内容

<script>
    function myFunction() {
        var str = "https://www.youtube.com/watch?v=1adfD9";
        var res = str.split("=");
        var embeddedUrl = "https://www.youtube.com/embed/"+res[1];
        document.getElementById("demo").innerHTML = res;
    }
</script>


函数myFunction（）{
var str=”https://www.youtube.com/watch?v=1adfD9";
var res=str.split（“=”）；
var embeddedUrl=”https://www.youtube.com/embed/“+res[1]；
document.getElementById（“demo”）.innerHTML=res；
}

我希望这对2020年研究这一问题的人有所帮助，你可以使用oembed API获得嵌入代码。原因是youtube URL可能有多种变体，使用regEx可能不是最佳解决方案

https://www.youtube.com/oembed?url=<URL>&format=<FORMAT>

你会得到的回应是

{
"type": "video",
"thumbnail_width": 480,
"provider_name": "YouTube",
"title": "Intro To Live Streaming on YouTube",
"thumbnail_height": 360,
"provider_url": "https://www.youtube.com/",
"version": "1.0",
"height": 270,
"author_name": "YouTube Creators",
"html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/gBrmnB5aOSI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
"author_url": "https://www.youtube.com/user/creatoracademy",
"width": 480,
"thumbnail_url": "https://i.ytimg.com/vi/gBrmnB5aOSI/hqdefault.jpg"
}

{
“类型”：“视频”，
“缩略图宽度”：480，
“提供商名称”：“YouTube”，
“标题”：“YouTube直播简介”，
“缩略图高度”：360，
“提供程序url”：https://www.youtube.com/",
“版本”：“1.0”，
“高度”：270，
“作者姓名”：“YouTube创作者”，
“html”：“，
“作者url”：https://www.youtube.com/user/creatoracademy",
“宽度”：480，
“缩略图url”：https://i.ytimg.com/vi/gBrmnB5aOSI/hqdefault.jpg"
}

您可以使用iframe的html数据，这对我在ReactJS上的工作很好

<iframe src={`https://www.youtube.com/embed/${url.split('='}[1]&autoplay=false`} controls allowfullscreen />

谁需要jQuery。下面是纯javascript代码，使用函数从YouTube URL获取
v
参数，并将当前的
标记替换为


常量url=”https://www.youtube.com/watch?v=qRv7G7WpOoU";
const v=新URL（URL）.searchParams.get（'v'）；
document.currentScript.insertAdjacentHTML(
“开始之前”，
`视频id=${v}`+
``
);
@if（path.Contains（'&'））
path=path.Split（'&'）[0]；

C#Razor pages解决方案！
我认为最简单的解决方案是：

ytUrl = "https://www.youtube.com/watch?v=DGIXT7ce3vQ"
// replace:
ytUrl.replace('/watch?v=', '/embed/')

我在视频（）中看到的可能重复内容在特定时间开始时不起作用。是否有相关帮助。我将查看是否可以在中起作用。结果表明，此代码段正在将指向YouTube视频的链接弄乱，这些链接将保留（在完全形成的标记中）所以我无论如何都需要解决这个问题。它至少在我今天/明天的待办事项列表中。它确实通过链接创建了播放器，链接为超文本youtu.be/fDVQPBvZOeo“>https://youtu.be/fDVQPBvZOeo 如果链接是这样的youtu.be/fDVQPBvZOeo“>视频它保持链接不变，我想这是两种情况下的规划功能。只要没有任何其他URL参数，这应该可以很好地工作。如果有，您还将获得下一个参数键作为分割函数的结果。当然，但您可以使用限制作为第二个参数。
string.split（分隔符，限制）
我希望这对你有帮助这应该是正确的答案，对于有服务器后端的人来说。太棒了，这很管用！
<script>
    function myFunction() {
        var str = "https://www.youtube.com/watch?v=1adfD9";
        var res = str.split("=");
        var embeddedUrl = "https://www.youtube.com/embed/"+res[1];
        document.getElementById("demo").innerHTML = res;
    }
</script>

https://www.youtube.com/oembed?url=<URL>&format=<FORMAT>

https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=gBrmnB5aOSI&format=json

{
"type": "video",
"thumbnail_width": 480,
"provider_name": "YouTube",
"title": "Intro To Live Streaming on YouTube",
"thumbnail_height": 360,
"provider_url": "https://www.youtube.com/",
"version": "1.0",
"height": 270,
"author_name": "YouTube Creators",
"html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/gBrmnB5aOSI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>",
"author_url": "https://www.youtube.com/user/creatoracademy",
"width": 480,
"thumbnail_url": "https://i.ytimg.com/vi/gBrmnB5aOSI/hqdefault.jpg"
}

<iframe src={`https://www.youtube.com/embed/${url.split('='}[1]&autoplay=false`} controls allowfullscreen />

<script>
const url = "https://www.youtube.com/watch?v=qRv7G7WpOoU";
const v = new URL(url).searchParams.get('v');

document.currentScript.insertAdjacentHTML(
  'beforebegin',
  `<h1>Video id=${v}</h1>` +
  `<iframe
      width="480" height="270"
      src="https://www.youtube.com/embed/${v}?feature=oembed"
      allowfullscreen></iframe>`
  );
</script>

 @if (path.Contains('&'))
                            path = path.Split('&')[0];

                <iframe width="690" height="400" src="@Model.YourModelNameHERE.Replace("watch?v=","embed/")" frameborder="0" allowfullscreen></iframe>

ytUrl = "https://www.youtube.com/watch?v=DGIXT7ce3vQ"
// replace:
ytUrl.replace('/watch?v=', '/embed/')