javascript - 使用基本 URL 和 Javascript 自动生成 YouTube 嵌入内容

标签 javascript jquery html iframe youtube

当我将视频网址粘贴到博客文章中时,我希望它使用 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 )。

谁能帮帮我吗?

最佳答案

试试这个:

$('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 .

关于javascript - 使用基本 URL 和 Javascript 自动生成 YouTube 嵌入内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21766682/

相关文章:

javascript - 务实地确定 EXT JS 6 - 必需或使用子文件

javascript - JointJS:在scaleContentToFit之后如何获得新的比例因子?

javascript - OBJ 文件未出现在浏览器 WebGL Three.js 中

javascript - Jquery - 将参数传递给函数

javascript - JSON 和 jQuery 搜索

javascript - 为什么 window.scrollTo() 没有被调用?

javascript - 如何在 perl CGI 脚本中使用 google API?

javascript - Jquery,点击传递值

HTML - 列忽略高度

jquery - 进度条上的后退按钮