如何使用从输入中插入的 URL 嵌入 Youtube 视频答案

【问题标题】：How to embed a Youtube Video using the URL inserted from an input如何使用从输入中插入的 URL 嵌入 Youtube 视频
【发布时间】：2016-04-17 15:21:48
【问题描述】：

所以我正在尝试在我的网页中嵌入一个 youtube 视频。要嵌入它，我需要使用用户在输入中插入的 URL。我需要使用什么 jquery/JavaScript 来嵌入视频？

【问题讨论】：

请告诉我们您的尝试。通用嵌入代码很容易获得......而且修改起来非常简单。从输入中获取值也非常简单，并且到处都有很好的文档记录。在这里提问之前，您应该表现出自己解决问题的一些努力，通过表明您已经做出了一些努力，您将获得更多帮助
function getId(url) { var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=| \&v=)([^#\&\?]*).*/; var match = url.match(regExp); if (match && match[2].length == 11) { return match[2]; } 其他 { 返回“错误”； } } 变量我的ID； $(document).ready(function(){ $('#embed1').click(function () { var myUrl = $('#URL1').val(); myId = getId(myUrl); $(' #youtubeID1').html(myId); $('#youtube1').html(''); }); });
请使用该代码更新问题...以便对其进行格式化和阅读。注释块不适合大块代码

标签： javascript jquery input youtube embed

【解决方案1】：

创建一个 iframe

<iframe id="myVid" width="420" height="315"
    src="">
</iframe>

然后从用户那里获取输入，最好是 url 并使用 jquery 传递它

$('#myVid').attr('src', "user-supplied-url")

【讨论】：

我试过了，但它只是说找不到文件
你能把你有代码的东西贴出来，我可以更好地看一下吗？

【解决方案2】：

来自@theDoctor 的格式化代码

function getId(url) {
    var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    var match = url.match(regExp);
    if (match && match[2].length == 11) {
        return match[2];
    } else {
        return 'error';
    }
}
var myId;
$(document).ready(function() {
    $('#embed1').click(function() {
        var myUrl = $('#URL1').val();
        myId = getId(myUrl);
        $('#youtubeID1').html(myId);
        $('#youtube1').html('<iframe width="560" height="315" src="//www.youtube.com/embed/' + myId + '" frameborder="0" allowfullscreen></iframe>');
    });
});

【讨论】：