使用Bootstrap嵌入高度敏感的YouTube問題

我正在使用Bootstraps網格系統創建一個響應式站點，它顯示容器中的內容，從不超過觀看高度，並使用三列顯示寬度，除非通過小屏幕查看，其中情況然後1列。問題是，我的YouTube嵌入不響應。我試過將它設置爲100％，auto，使用幾個引導類，從嵌入到iframe切換，並嘗試許多相同的想法。沒有任何工作。無論寬度如何，我都會得到一個大約100px的小靜態高度。這是我的html。使用Bootstrap嵌入高度敏感的YouTube問題

<div class="row"> 
    <div class="col-md-4"><center> 
    <h1>Once in a lifetime</h1> 
    <p> 
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksg 
    </p> 
    </center></div> 
    <div class="col-md-4"><center> 

<embed width="80%" height="100%" src="//www.youtube.com/embed/NOcjwN3jkZ4?autoplay=1" frameborder="0" allowfullscreen></embed> 

</center></div> 
    <div class="col-md-4"><center> 
    <h1>Check it out!</h1> 
    <a href="http://wwww.link.xyz"><h3>http://wwww.link.xyz</h3></a> 
    </center></div> 
</div>

這裏是我用來防止水平滾動的一些CSS。

html, body { 
    max-width: 100%; 
    height:100%; 
    overflow-x: hidden; 
}

請幫忙。

來源

2014-07-25 Goose

http://fitvidsjs.com/ – Christina

Fitvids犯規處理高度僅寬度。有關您的問題的答案，請參閱http://stackoverflow.com/a/26198291/1922144。 – davidcondrey

[將Youtube視頻縮小爲響應寬度]（http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width） – davidcondrey

使用下面的任何片段將允許瀏覽器根據其包含塊的寬度確定視頻尺寸，方法是創建一個可在任何設備上正確縮放的固有比例。

<!-- 16:9 aspect ratio --> 
<div class="embed-responsive embed-responsive-16by9"> 
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/NOcjwN3jkZ4?autoplay=1"></iframe> 
</div> 

<!-- 4:3 aspect ratio --> 
<div class="embed-responsive embed-responsive-4by3"> 
    <iframe class="embed-responsive-item" src="//www.youtube.com/embed/NOcjwN3jkZ4?autoplay=1"></iframe> 
</div>

您可能希望籤引導文件的更多信息這個

http://getbootstrap.com/components/

來源

2014-11-26 07:55:46

使用Bootstrap嵌入高度敏感的YouTube問題

回答

相關問題