Youtube嵌入視頻適合瀏覽器大小

請，你能給我一個建議，如何適應youtube嵌入視頻瀏覽器大小？我需要完全填寫網站，但我不知道，如何去做。現在我的視頻適合寬度或高度。但我需要兩個。你知道嗎，怎麼做？Youtube嵌入視頻適合瀏覽器大小

我的代碼至今： HTML：

<div id="bg" class="bg background-image"> 
      <div class="embed-container"> 
       <div id="youtube-player"></div> <!-- this row is replaced by iframe with video. i'm using youtube data api.... --> 
      </div> 
</div>

CSS：

html{ 
    height: 100%; 
} 
body { 
    min-height: 100%; 
} 
.bg { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    position: absolute; 
    left: 0; 
    top: 0; 
    z-index: -9999; 
} 
.background-image { 
    background: #000; 
    background-size: cover; 
    min-height: 100%; 
    position:absolute; 
    bottom:0; 
    left:0; 
} 
.background-overlay { 
    background: url('../assets/images/bg_pattern.png') left top; 
}

來源

2014-12-20 Jan Kožušník

發佈你的代碼，所以有人可以指出該做什麼。 –

可能dublicate的http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width –

body{margin:0;padding:0} 
 
#youtube-player{width:100%!important;height:100vh;marign:0 ;padding:0}

<div id="bg" class="bg background-image"> 
 
      <div class="embed-container"> 
 
       <iframe id="youtube-player" src="//www.youtube.com/embed/ibXepDwdzjs" frameborder="0" allowfullscreen></iframe> 
 
       <!-- this row is replaced by iframe with video. i'm using youtube data api.... --> 
 
      </div> 
 
</div>

我覺得你可以做這樣的事情只用CSS

來源

2014-12-20 14:03:28

你幾乎是正確的。這個解決方案的問題是，如果我縮小了瀏覽器的寬度，視頻變得更高，並且具有底部和頂部的黑邊 - 它不適合......：/我需要完全填充網站 –

Youtube嵌入視頻適合瀏覽器大小

回答

相關問題