如何将 YouTube 嵌入视频设为整页宽度？

Posted 2023-02-24

【中文标题】如何将 YouTube 嵌入视频设为整页宽度？

【英文标题】：How to make a YouTube embedded video a full page width one?

【发布时间】：2013-12-09 13:11:34

【问题描述】：

代码如下：http://jsfiddle.net/dLPa8/

如果您向下滚动，则会嵌入来自 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"  ></iframe>

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

【问题讨论】：

这家伙为响应式 youtube vids 写了一个很好的教程 avexdesigns.com/responsive-youtube-embed

整页你的意思是整页吗？喜欢全屏？

是的。有点全屏。

1 页表示一个 1920x1080（或 1366x768 或任何其他）框

@koningdavid 成功了！谢谢。

【参考方案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' );
  );
);

【讨论】：

若页面上有更多元素，只需使用body overflow: hidden; 或body overflow-x: hidden; 来保持垂直滚动即可移除滚动条。我已经更新了小提琴。

如何让它只适应宽度而不是高度，但仍然保持比例？

【参考方案2】：

正确的 iframe 样式

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

【参考方案3】：

尝试使用innerHeight 或.clientHeight：

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

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