从 URL 生成 Youtube 嵌入 iframe 以供预览答案

【问题标题】：Generating a Youtube embed iframe from URL in a form for preview从 URL 生成 Youtube 嵌入 iframe 以供预览
【发布时间】：2018-03-26 20:59:26
【问题描述】：

所以我正在创建一个表单，人们可以在其中输入描述食谱的各种数据。其中一种数据类型是 youtube 视频 URL。我想将用户放入 URL 框中的数据并生成带有视频的 iframe，以便可以预览并确保它是正确的。这是我正在使用的代码：

function makeVideoPreview(aTable, aTextBox)
{
	var aVideo = document.createElement("iframe");
	aVideo.setAttribute("width", "560");
	aVideo.setAttribute("height", "315");
	var theURL = aTextBox.value;

	var idIndex = theURL.indexOf("v=") + 2;
	var vidID = theURL.slice(idIndex, theURL.length     );;

	var embedLink = "https://www.youtube.com/embed/"+ vidID;
	aVideo.setAttribute("src", embedLink);
	aVideo.setAttribute('allowfullscreen', 'true');
    aVideo.setAttribute('frameborder', "0");
	aTable.appendChild(aVideo);
}

如果我使用调试器并单步执行代码，iframe 会被放置在正确的位置并开始加载，然后我会收到 405 方法不允许错误并重新加载整个页面。

如果我从调试器复制生成的 iframe 并将其粘贴到 html 源代码中，它可以正常工作。到底是怎么回事？

我不是网络人。我主要进行原生 iOS 开发，但我将其作为一种资源，以便我为其开发应用程序的公司可以添加食谱内容。我确定这是我对平台的不了解。

谢谢。

【问题讨论】：

如何通过表单的提交事件或类似事件调用此函数？听起来您没有正确阻止默认提交过程，因此向“静态”URL（例如 HTML 文件，网络服务器通常配置为拒绝）发出 POST 请求。如果这些提示没有帮助，请创建一个minimal reproducible example。
Youtube 提供了一个播放器 API，也许使用它会更合适？ Youtube API documentation
提供的代码在隔离时没有任何问题......
@CBroe 表单是动态创建的。在这种情况下，有一个表有 1 行，最初有 2 列。一个带有文本字段，一个带有“预览按钮”。预览按钮 onclick 属性调用发布的代码。也许我不明白如何“防止默认提交过程”，我认为只有在按下提交时才会发生。如何防止 POST 按钮点击？

标签： javascript html iframe youtube

【解决方案1】：

我刚刚找到了答案！我想。显然每个元素“按钮”都默认提交。我假设提交是一个提交，而按钮是一个无操作元素，除非给出特定的 onclick 或类似功能。显然，必须将按钮类型设置为按钮，否则默认为提交。

【讨论】：