javascript - 加载 Youtube 视频时随机化时不会全屏显示

Question

我环顾四周并看到了类似的问题，但没有一个答案对我有用。现在，我的代码如下所示:

var videos = ["P1DQiS4zvi0", "HocBwQ7wkHk", "J7_r3jl9YA4", "y_C-HYubwuQ",   "BCyKiPLtMIk", "27gzg7TLJJ8", "yuJMIC39Rss", "9UJ7xYXK2cE", "EnwP9T1piq4"];
var choice = Math.floor(Math.random()*10);
var html = '<iframe id="video" style="overflow:hidden" src="http://www.youtube.com/embed/' + videos[choice] + '?modestbranding=1&autoplay=1&autohide=1&controls=0&vq=hd1080&rel=0" frameborder="0" allowfullscreen></iframe>';
document.write(html);

标题中的此功能使视频全屏显示:

$(function(){
      $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });

      $(window).resize(function(){
        $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
      });
    });

我的问题是视频可以加载，但左上角的尺寸很小，而不是全屏视频。此外，网页的其余部分无法正确加载。

如果我取出视频 HTML 并用静态 ID 替换它，它就可以正常工作。

我尝试将全屏功能放在与随机发生器相同的脚本中，但没有成功。

我认为这一定是 id(视频)在 javascript 中未被识别的内容，因此该函数不适用于它。不过我是一个 JS 菜鸟，不知道它到底是如何工作的。

预先感谢您的帮助!

Answer 1

执行顺序。

您需要确保样式 block 在 document.write(html); 之后执行

或者使用非内联样式规则。

#video{
 width:100%;
 height:100%;
 ...
}