javascript 将 YouTube 链接转换为嵌入视频

标签 javascript jquery html youtube

我的页面上有很多链接,全都随意地写在各处。如果有这样的链接:

<a href="https://youtu.be/4tG274QuqHM" title="Go To https://youtu.be/4tG274QuqHM" target="_blank" style="text-decoration:none;">https://youtu.be/4tG274QuqHM</a>

<a href="https://youtube.com/watch?v=4tG274QuqHM" title="Go To https://youtube.com/watch?v=4tG274QuqHM" target="_blank" style="text-decoration:none;">https://youtube.com/watch?v=4tG274QuqHM</a>

Any Other YouTube Video Link Format

JavaScript 中是否有任何方法可以获取任何形式的 YouTube 链接并将其转换为 YouTube 嵌入 Iframe,通过使用 JavaScript 使其最终看起来像这样;

<iframe width="420" height="345" src="http://www.youtube.com/embed/4tG274QuqHM?autoplay=0&autohide=1&controls=2&rel=0" frameborder="0" allowfullscreen="true"></iframe>

任何人都可以修复此代码以使其正常工作吗???

$(document).ready(function() {
    $('a').each(function() {
        var matches = $(this).attr("href").match(/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/);
            if(matches){
                $(this).attr("class","youtube-link");
            }
    });
    $('a.youtube-link').each(function() {
        var yt_url = this.href,
            yt_id = yt_url.split('?v=')[1],
            yt_id = yt_url.split('embed/')[1],
            yt_title = $(this).text();
        $(this).replaceWith('<iframe style="max-width:560px;max-height:315px;" width="600" height="600" src="http://www.youtube.com/embed/' + yt_id + '?rel=0" frameborder="0" allowfullscreen></iframe>');
    });
});

最佳答案

我会检查这个链接。这是 Google 关于 Youtube iFrame 的文档。 https://developers.google.com/youtube/player_parameters#Embedding_a_Player

关于javascript 将 YouTube 链接转换为嵌入视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36363791/

相关文章:

javascript - Firefox 中的 <video onclick>

javascript - 对 javascript 中的构造函数感到困惑

JavaScript 数据结构

javascript - Jquery查找对象集合并将其转换为html字符串

我的 html 页面上的 Javascript 冲突

javascript - 重定向用户下载,就像看不到一样

javascript - 如果使用 Angular js 与 ng-repeat 一起使用,则调用一次函数

javascript - 如何按 '.' '!' '?' 进行 .slice() 文本而不丢失它们? (正则表达式)

javascript - 设计一个实时获取数据的div HTML, CSS, Php, JavaScript and MySql

javascript - 找不到 javascript 错误