仅限YouTube模式窗口、CSS和HTML的垂直问题_Html_Css_Dynamic_Youtube_Modal Dialog

仅限YouTube模式窗口、CSS和HTML的垂直问题

html css dynamic youtube

仅限YouTube模式窗口、CSS和HTML的垂直问题,html,css,dynamic,youtube,modal-dialog,Html,Css,Dynamic,Youtube,Modal Dialog,我正在尝试制作一个播放YouTube视频的模式窗口。最终结果应动态调整自身大小以填充视口内容，同时始终遵循16:9的纵横比。一旦达到720便士，它就应该停止扩张我遇到了这些问题：如果宽度较大（溢出），则视频不考虑视口的高度视频根本没有垂直居中我根本不知道如何修复这些。我花了几个小时研究了许多类似的堆栈溢出问题，但没有取得任何进展。还有希望吗我的HTML： <div id="youtube-overlay"> <div id="youtube-margin"&g

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

我遇到了这些问题：

如果宽度较大（溢出），则视频不考虑视口的高度

视频根本没有垂直居中

我根本不知道如何修复这些。我花了几个小时研究了许多类似的堆栈溢出问题，但没有取得任何进展。还有希望吗

我的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>

试试这个：

<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>


.youtube高清{
宽度：100%；
身高：100%；
最大高度：720px；
最大宽度：1280px；
}

你不需要你拥有的

DIV

结构。

如果我理解正确的话，你也不想要或不能拥有javascript？老实说，在这一点上，值得一试。你已经解决了吗？是的，但我求助于jQuery。我从来没有发现在CSS中垂直居中的项比水平居中的项更容易。

<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>