YouTube iframe背景中的响应高度[重复]

Question

我对包含 YouTube iframe（已经响应）的 div 的参数高度有一个小问题。 播放器的背景设置为 636px。当我调整窗口播放器的大小时，它正在缩放而不是它下面的空间。

网站：http://www.kudlatyworkshop.com/motorsport/

背景的CSS：

#slider_container {
position: relative;
z-index: 1;
margin-top: -131px;
height: 636px;

对于 YouTube：

  .video-container {
    position: relative;
    padding-bottom: 52.25%;
    padding-top: 50px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

我试图通过@media 标签修复它，但这不是我要找的。

感谢您的帮助，对不起我的英语。

库巴

Answer 1

滑块容器的高度永远不会真正改变。您需要（在每个断点中）指定一个看起来与视频大小一致的高度。

您必须指定高度的原因是因为 flex 滑块具有 position: absolute;（这可能是运行它的 js 的要求，也可能不是），因此它被渲染，但不在文档流中。

我想说最快的解决方法是 a) 重新配置断点并设置更多断点，以便高度可以更频繁地更改以提供响应式外观，或者 b) 使用 @ 覆盖 .flexslider 类的绝对定位987654323@你自己的班级position: static;

如果视频是您在此页面上显示的唯一内容，那么您应该没问题。