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替换它，它的效果非常好。

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

我认为它必须是javascript中无法识别id（视频）的内容，因此该功能并不适用于它。我是一个JS noobie，但并不确切知道它是如何运作的。

提前感谢您的帮助！

Answer 1

执行顺序。

您需要确保在document.write（html）之后执行样式块;

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

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

在随机化时加载Youtube视频不全屏

1 个答案: