gpt4 book ai didi

html - YouTube 模式窗口的垂直问题,仅限 CSS 和 HTML

转载 作者:行者123 更新时间:2023-11-28 12:56:02 25 4
gpt4 key购买 nike

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

我遇到了这些问题:

  1. 如果宽度较大(溢出),则视频不考虑视口(viewport)的高度
  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%;
}

最佳答案

试试这个:

<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结构。

关于html - YouTube 模式窗口的垂直问题,仅限 CSS 和 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16513689/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com