0

我正在尝试制作一个播放 YouTube 视频的模式窗口。最终结果应动态调整自身大小以填充视口的内容，同时始终遵守 16:9 的纵横比。一旦达到 720p，它应该停止扩展。

我遇到了这些问题：

  1. 如果宽度很大（溢出），视频不尊重视口的高度
  2. 视频根本不是垂直居中的

我完全不知道如何解决这些问题。我已经查看了许多类似的 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%;
}
4

1 回答 1

0

尝试这个：

<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-13T16:13:55.477 回答