如何使YouTube嵌入视频的全页宽度一？ [英] How to make a YouTube embedded video a full page width one?

问题描述

这里是代码的谜： http://jsfiddle.net/dLPa8/

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

If you scroll down, there's a video embedded from YouTube. What I need it, it should cover the full page height and width. I mean it should appear somewhat like the first section (in the fiddle).

我尝试过：

<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 。

It solved the problem to a certain extent, but the video clings to the top of the page using the above iframe. How can I make the video section height the full page height?

推荐答案

这里有一个 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' });
  });
});

这篇关于如何使YouTube嵌入视频的全页宽度一？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！