Question

所以这是我的情况。我有一个页面HTML，使用标准YouTube显示iFrame link视频。我想要做的是在我的页面上有一个文本框，人们可以在其中输入视频ID，视频将通过输入的新链接或视频ID重新加载。

代码HTML：

<p> Type your video's ID here: <input type="text" name="VideoID"></p>

<iframe title="YouTube video player" src="http://www.youtube.com/embed/hqiNL4Hn04A" width="480" height="390" frameborder="0"></iframe></p>

Answer 1

你应该看一下这篇文章，因为我觉得这就是你想要的。

dynamically set iframe src

http://jsfiddle.net/MALuP/

<script type="text/javascript">
function iframeDidLoad() {
alert('Done');
}

function newSite() {
var sites = ['http://getprismatic.com',
             'http://gizmodo.com/',
             'http://lifehacker.com/']

document.getElementById('myIframe').src = sites[Math.floor(Math.random() * sites.length)];
}    
</script>
<input type="button" value="Change site" onClick="newSite()" />

Answer 2

您需要在

之类的表单中申请视频ID

<p>
    <form id="getytid">
        <label>Type your video's ID here:</label>
        <input type="text" name="VideoID" />
        <input type="submit" value="go" />
    </form>
</p>
<p>
    <iframe id="theFrame" title="YouTube video player" src="" width="480" height="390" frameborder="0"></iframe>
</p>

注意我们为表单和 iframe 分配了一个ID，以便我们可以通过jQuery操作它们。

然后您可以使用此代码使用新的视频ID更新 iframe ：

jQuery(document).ready(function($) {
    $("#getytid").on("submit", function (e) {
        e.preventDefault();
        $("#theFrame").attr("src", "http://www.youtube.com/embed/" + $("input[name=VideoID]").val()+"?autoplay=1")
    }); // on
}); // ready

参见 JSFIDDLE

注意：

初始iframe html没有设置任何src属性。您可以将其留空，直到访问者输入ID或您可以使用默认视频路径填充它

Answer 3

将youtube网址另存为变量。

HTML：

<input type="text" name="VideoID" id="youtubevid" />

JS：

var youtube = "http://www.youtube.com/embed/"; // base
var video;
var url;
// set value
$('#youtubevid').on('change', function() { 

video = $('#youtubevid').val();

url = youtube + video;

// set link attribute here in iframe.
//$('#idofiframehere').attr('src', url);
});

更新html中iframe链接的href

3 个答案: