如何通过在输入中输入视频 ID 来嵌入 youtube 视频？答案

【问题标题】：How can I embed youtube video by entering video id in input?如何通过在输入中输入视频 ID 来嵌入 youtube 视频？
【发布时间】：2020-08-26 18:33:29
【问题描述】：

我想通过输入视频 ID 进行嵌入 youtube 视频的输入。这是我尝试过的，但没有成功

HTML

<form action="http://www.youtube.com/embed/">
   <input class="EnterID" type="text" id="txtSRC" />
   <input class="submitid" type="button" value="Submit" onclick="SetSrc()" />
</form>

<iframe id="myIfreme" src="" frameborder="0" marginwidth="0" scrolling="yes" height="420" width="640"></iframe>

<script type="text/javascript">
        function SetSrc() {
            document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
        }

</script>

【问题讨论】：

尝试删除表单或阻止默认提交事件。你没有告诉我们除了“它没有用”之外发生了什么。在不阻止默认表单提交过程的情况下，由于表单的操作，您几乎肯定会在 youtube 上结束
您应该真正开始使用 javascript 中的 element.addEventListener 添加您的侦听器，而不是内联它们。内联事件处理是黑客的攻击漏洞，如果您设置 content-security-policy，它们将无法工作。

标签： javascript html youtube

【解决方案1】：

有几点：

您应该在提交时激活您的功能

添加事件对象，在其上调用preventDefault()，然后使用document.location = ...;

     function SetSrc(e) {
       e.preventDefault();
         document.getElementById("myIfreme").src = document.getElementById("txtSRC").value;
         document.location = ...;
     }

【讨论】：

【解决方案2】：

为什么action要在前面加上url？它应该在这样的javascript代码中：

<script type="text/javascript">
        function SetSrc() {
            document.getElementById("myIfreme").src = "http://www.youtube.com/embed/" + document.getElementById("txtSRC").value;
        }

</script>

【讨论】：