web-dev-qa-db-ja.com

YouTube埋め込みビデオをページ幅いっぱいにする方法は？

コードの詳細は次のとおりです。 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" height="100%" width="100%"></iframe>

問題をある程度解決しましたが、上記のiframeを使用してビデオがページの上部にしがみついています。ビデオセクションの高さをページ全体の高さにするにはどうすればよいですか？

htmlcssyoutube
13
Ranveer

[〜＃〜] 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' });
  });
});
27
mdesdev

innerHeightまたは.clientHeightを使用してみてください。

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

var whには、スクロールバーなしでウィンドウの高さが含まれるようになりました。

0
StackSlave