【发布时间】：2020-06-03 16:27:35
【问题描述】：
您好， 当我将 youtube 视频嵌入到 iframe 中时，该视频不是通过 HTML 标记制作而是使用 JavaScript (document.createElement()) 创建的，视频无法播放，并且只显示错误消息“视频不可用”。
附加信息：
- 第一个 iframe 没有 src 属性。
- iframe 的文档是以编程方式创建的。第二 （视频嵌入）iframe 是第一个 iframe 文档的一部分。
- 此页面在 localhost 上运行。
- 这种行为也发生在在自己的域上运行的在线应用程序上。
- 并非所有视频都会出现这种行为，我注意到它主要发生在音乐视频中。
- 所有视频都已启用嵌入，因此这不是无法播放这些视频的原因。
index.html：
<html>
<div>
<iframe id="myFrame" style="width: 600px ; height: 350px" src="iframeVideo.html" frameborder="1"
allowfullscreen=""></iframe>
</div>
<div id="video"></div>
<script>
var container = document.getElementById("video");
var frame = document.createElement("iframe");
frame.style.width = "600px";
frame.style.height = "400px";
frame.onload = function () {
if (frame.contentDocument) {
var fdoc = frame.contentDocument;
var vframe = fdoc.createElement("iframe");
vframe.src = "https://www.youtube.com/embed/NEIwl93Yr8o";
vframe.setAttribute("frameborder", "0");
vframe.setAttribute("allowfullscreen", "");
vframe.style.width = "500px";
vframe.style.height = "281px";
fdoc.body.appendChild(vframe);
}
}
container.appendChild(frame);
</script>
</html>
iframeVideo.html：
<html>
<iframe id="myFrame" style="width: 500px ; height: 281px" src="https://www.youtube.com/embed/NEIwl93Yr8o" frameborder="0"
allowfullscreen=""></iframe>
</html>
【问题讨论】：
-
查看浏览器控制台（F12）是否有错误或警告。
-
只有这个警告：与youtube.com 处的跨站点资源关联的cookie 被设置为没有
SameSite属性。未来版本的 Chrome 将仅通过设置为SameSite=None和Secure的跨站点请求传递 cookie。您可以在 Application>Storage>Cookies 下的开发者工具中查看 cookie，并在 chromestatus.com/feature/5088147346030592 和 chromestatus.com/feature/5633521622188032 上查看更多详细信息 -
还要检查“网络”选项卡并查看请求的响应 - 密切注意 iframe 的响应。 可能您可能需要在 iframe 中添加一个附加参数； IIRC，iframe 中视频的 URL 为：
https://www.youtube.com/embed/NEIwl93Yr8o?origin=http:yourwebsite.com。 -
我已经尝试过使用 youtube 提供的参数，我也在研究请求，但我没有找到任何有用的信息来表明问题所在或可以解决的问题。 （也许我看错了什么）
-
其他选项可能是：在issue tracker 上发布您的问题 - 它可能有一些关于音乐视频的限制或
document.createElement= 您需要以这种方式创建 DOM 元素吗？ - 尝试使用页面上已有的 DOM/html 控件。也许是 iframe 内部变量的初始化...
标签： javascript video iframe youtube-api