僅適用於YouTube模式窗口，CSS和HTML的垂直問題

我試圖製作播放YouTube視頻的模式窗口。最終結果應該動態調整自己的大小以填充視口的內容，同時始終保持16：9的寬高比。一旦達到720p就應該停止擴展。僅適用於YouTube模式窗口，CSS和HTML的垂直問題

我運行到這些問題：

視頻不尊重視口的高度如果寬度大（溢出）
視頻不是在所有垂直居中

我不知道如何解決這些問題。我在許多類似的Stack Overflow問題上尋找了幾個小時，並沒有取得任何進展。有沒有希望？

我的HTML：

<div id="youtube-overlay"> 
    <div id="youtube-margin"> 
     <div id="youtube-container"> 
      <iframe class="youtube-hd" src="http://www.youtube.com/embed/NoVW62mwSQQ?rel=0&autoplay=1&autohide=1&showinfo=0" frameborder="0" ></iframe> 
     </div> 
    </div> 
</div>

我的CSS：

#youtube-overlay { 
    background-color: rgba(0, 0, 0, .85); 
    height: 100%; 
    width: 100%; 
    left: 0; 
    top: 0; 
    position: fixed; 
    z-index: 999999; 
    visibility: hidden; 
} 

#youtube-container { 
    position: relative; 
    max-width: 1280px; 
    max-height: 100%; 
    margin: 0 auto; 
    padding-bottom: 56.25%; 
} 

#youtube-margin { 
    margin: 10px; 
} 

.youtube-hd { 
    position: absolute; 
    max-height: 720px; 
    height: 100%; 
    width: 100%; 
}

來源

2013-05-13 Marcus McLean

如果我理解正確，你不想或不能擁有JavaScript？ – Sergio 2013-05-13 05:20:02

在這一點上值得嘗試，誠實。 – 2013-05-13 12:26:51

你已經解決了這個問題嗎？ – Sergio 2013-05-19 06:34:35

試試這個：

<head> 
<style type="text/css"> 
.youtube-hd { 
width:100%; 
height:100%; 
max-height:720px; 
max-width:1280px; 
} 
</style> 
</head> 
<body> 
<table style="width: 100%; height:100%;"> 
<tr> 
<td style="text-align: center; vertical-align: middle;"> 
     <iframe class="youtube-hd" src="http://www.youtube.com/embed/NoVW62mwSQQ?rel=0&autoplay=1&autohide=1&showinfo=0" frameborder="0" ></iframe> 
</td> 
</tr> 
</table> 
</body>

你不需要DIV結構你了。

來源

2013-05-13 16:13:55 Sergio

僅適用於YouTube模式窗口，CSS和HTML的垂直問題

回答

相關問題