javascript - 更新html中iframe链接的href

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

您需要在以下表格中请求视频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为止，或者可以使用默认视频路径填充它