JS动态创建嵌套iframe嵌入YouTube视频无法播放问题求助

我之前处理过不少类似的嵌套iframe嵌入YouTube视频的案例，尤其是音乐类视频更容易触发这个"Video unavailable"错误，核心原因其实是YouTube的嵌入安全验证机制，结合你这种动态创建空白外层iframe的场景导致的：

问题根源 #

当你通过document.createElement('iframe')创建外层iframe但不设置src或srcdoc时，这个iframe的文档是about:blank，它的origin会被标记为null。YouTube的嵌入服务器会检查父级文档的origin是否合法，对于版权限制更严格的音乐类视频，这种null origin会被直接判定为不符合嵌入条件，即使你已经开启了视频的嵌入权限。

而你代码里的iframeVideo.html能正常播放，是因为这个外层iframe加载了同域的HTML文件，它的origin和主页面一致，通过了YouTube的验证。

解决方案 #

你有两种可行的修改方式，任选其一即可：

方案1：给外层iframe设置同域的src #

直接复用你已有的iframeVideo.html作为外层iframe的源，这样外层iframe有合法的同域origin，之后动态添加YouTube iframe就能正常播放：

var container = document.getElementById("video");
var frame = document.createElement("iframe");
frame.style.width = "600px";
frame.style.height = "400px";
// 设置外层iframe的src为同域的HTML文件
frame.src = "iframeVideo.html";
frame.onload = function () {
  var fdoc = frame.contentDocument || frame.contentWindow.document;
  // 如果需要替换原有视频，可以先移除旧的iframe
  // var oldFrame = fdoc.getElementById("myFrame");
  // oldFrame?.remove();
  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);

方案2：使用srcdoc给外层iframe设置合法的文档 #

如果不想额外创建HTML文件，可以用srcdoc属性给外层iframe注入一个简单的HTML结构，这样它的origin会继承主页面的域，而非null：

var container = document.getElementById("video");
var frame = document.createElement("iframe");
frame.style.width = "600px";
frame.style.height = "400px";
// 通过srcdoc设置外层iframe的文档，确保origin合法
frame.srcdoc = '<!DOCTYPE html><html><body></body></html>';
frame.onload = function () {
  var fdoc = frame.contentDocument || frame.contentWindow.document;
  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);

额外注意点 #

• 确保主页面和外层iframe的源（无论是src还是srcdoc）属于同域，否则可能会触发跨域权限问题，无法操作外层iframe的contentDocument。
• 音乐类视频的版权验证比普通视频更严格，所以必须确保所有嵌套层级的iframe都有合法的origin，不能出现null或跨域的情况。

内容的提问来源于stack exchange，提问作者Radek M.