使用带有 Javascript 的基本 URL 自动生成 YouTube 嵌入答案

【问题标题】：Automatically generating YouTube embed using basic URL with Javascript使用带有 Javascript 的基本 URL 自动生成 YouTube 嵌入
【发布时间】：2014-02-13 22:14:39
【问题描述】：

当我将视频 URL 粘贴到博客文章中时，我希望它使用 YouTube API 显示为具有自定义参数的 iframe 嵌入式播放器。当我嵌入视频时，我不想每次都手动添加参数。这是我的 JS：

$('body').html(function(i, html) {
return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<center><iframe width="640" height="360" src="http://www.youtube.com/embed/$1?modestbranding=1&rel=0&wmode=transparent&theme=light&color=white" frameborder="0" allowfullscreen></iframe></center>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<center><iframe src="//player.vimeo.com/video/$1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></center>').replace(/(?:http:\/\/)?(?:dailymotion\.com|dai\.ly)\/(.+)/g, '<center><iframe frameborder="0" width="560" height="315" src="http://www.dailymotion.com/embed/video/$1?logo=0&foreground=ffffff&highlight=1bb4c6&background=000000" allowfullscreen></iframe></center>');
});

Here is a JSfiddle example

但是当我将它转移到我在 Blogger 上的网站时，它不起作用 (example)。

谁能帮帮我？

【问题讨论】：

我想这样做，以便可以将参数添加到嵌入 URL。我知道如何嵌入视频，但我不想每次都手动添加参数。
为什么它在您的网站上不起作用？你有任何错误吗？查看链接，我可以看到一篇嵌入 YouTube 视频的文章
当您点击“播放”时出现错误，当您点击右下角的“YouTube”图标时，它会将您带到www.youtube.com/?

标签： javascript jquery html iframe youtube

【解决方案1】：

试试这个：

$('body').html(function(i, html) {
return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?([^<]+)/g, '<center><iframe width="640" height="360" src="http://www.youtube.com/embed/$1?modestbranding=1&rel=0&wmode=transparent&theme=light&color=white" frameborder="0" allowfullscreen></iframe></center>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/([^<]+)/g, '<center><iframe src="//player.vimeo.com/video/$1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></center>').replace(/(?:http:\/\/)?(?:dailymotion\.com|dai\.ly)\/([^<]+)/g, '<center><iframe frameborder="0" width="560" height="315" src="http://www.dailymotion.com/embed/video/$1?logo=0&foreground=ffffff&highlight=1bb4c6&background=000000" allowfullscreen></iframe></center>');
});

媒体链接后你有</div>，所以你需要在小于之前停止匹配。

检查Fiddle。

【讨论】：

优秀。太感谢了！ :)
但是，此代码还会更改现有 iframe 的来源，导致它们显示为错误。我们可以对代码进行任何修改，以免发生这种情况吗？我的网站上有 450 多个帖子，我不想用基本链接替换所有嵌入的视频。
这只是正则表达式调整，所以如果您在其他帖子上提供链接 sn-ps（链接和包装），我们可以调整正则表达式以匹配您的需要:)
我不明白。如果发布日期在 2014 年 2 月 20 日之后，使用 javascript 检测博客上帖子的日期并应用上述脚本不是更容易吗？
我可以使用 javascript 来检测帖子 threelas.com/2012/05/how-to-retrieve-posts-using-blogger.html 的日期，如果该日期在 2014 年 2 月 20 日之后，那么它可以运行代码来替换 YouTube 网址？

【解决方案2】：

您可以尝试使用 oEmbed 协议，我认为它完全符合您的需求：查看http://oembed.com/

来自文档：

oEmbed 是一种允许在第三方网站上嵌入 URL 表示的格式。简单的 API 允许网站在用户发布指向该资源的链接时显示嵌入的内容（例如照片或视频），而无需直接解析该资源。

我看到您在示例中使用的三个视频提供商都有一个 oEmbed API：

维密欧：http://developer.vimeo.com/apis/oembed
每日动态：http://www.dailymotion.com/doc/api/oembed.html
Youtube：我找不到链接，但我很确定他们也支持 oEmbed

【讨论】：

【解决方案3】：

只是一个小的正则表达式调整：添加了现在大部分时间都适用的 'https'-case 以及更多检测 url 结束的方法，主要是针对 url 不在封闭标记中，而是在运行文本中的情况.

return html.replace(/(?:http:|https:)?(?:\/\/)(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?([^<.,!():"'\s]+)/g, '<iframe width="600" height="350" src="http://www.youtube.com/embed/$1?modestbranding=1&rel=0&wmode=transparent&theme=light&color=white" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:|https:)?(?:\/\/)(?:www\.)?(?:vimeo\.com)\/([^<.,!():"'\s]+)/g, '<iframe src="//player.vimeo.com/video/$1" width="600" height="350" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>').replace(/(?:http:|https:)?(?:\/\/)(?:dailymotion\.com|dai\.ly)\/([^<.,!():"'\s]+)/g, '<iframe frameborder="0" width="600" height="350" src="http://www.dailymotion.com/embed/video/$1?logo=0&foreground=ffffff&highlight=1bb4c6&background=000000" allowfullscreen></iframe>');

【讨论】：