Question

我的div参数高度存在小问题，其中包含YouTube iframe（alredy响应）。播放器的背景设置为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的绝对定位具有.flexslider

的position: static;类的类

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

YouTube iframe背景中的响应高度

1 个答案: