Question

如果您向下滚动，则会在YouTube中嵌入视频。我需要它，它应该涵盖整页的高度和宽度。我的意思是它应该看起来有点像第一部分（在小提琴中）。

我试过了：

<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>

它在一定程度上解决了问题，但视频使用上面的iframe粘贴到页面顶部。如何将视频部分的高度设为整页高度？

Answer 1

这里是FIDDLE

<iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU" frameborder="0" allowfullscreen></iframe>


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

  // If you want to keep full screen on window resize
  $(window).resize(function(){
    $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
  });
});

Answer 2

尝试使用innerHeight或.clientHeight：

var doc = document, bod = doc.body, dE = doc.documentElement;
var wh = innerHeight || dE.clientHeight || bod.clientHeight;

var wh现在包含窗口高度，没有滚动条。

Answer 3

iframe的正确样式

iframe {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

如何制作整页宽度的YouTube嵌入式视频？

3 个答案: