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

时间:2016-01-12 20:39:22

标签: javascript jquery input youtube embed

所以我试图在我的网页中嵌入YouTube视频。要嵌入它,我需要使用用户在输入中插入的URL。我需要使用什么jquery / JavaScript来嵌入视频?

2 个答案:

答案 0 :(得分:0)

创建iframe

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

然后从用户处获取输入,最好是url并使用jquery

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

答案 1 :(得分:0)

来自@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>');
    });
});