使用响应式视频和填充

我为一群她的演讲者组成了一个朋友的快速网站。一切都很好，但由于某种原因，我放在我的视频容器底部的填充是为了让它在没有视频的情况下有这么大的空间。对于我的生活，我不知道还有什么办法可以让这些视频响应，但如果没有视频，它不会造成这么大的差距。使用响应式视频和填充

这是我从一个网站的代码片段，使所有的视频响应（您然后将视频嵌入代码包装在几个div）。

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

这里是我的视频容器

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

这里CSS中的巨大差距为例，当没有视频提交 - http://spellbindersspeakers.org/speaker/yvonne-thompson

这是它应该是什么样子时，有提交的视频和感言 - http://spellbindersspeakers.org/speaker/roslyn-franken

如果没有视频的演讲者，我不想有这么大的差距。我只是想让推荐书放在按钮或顶部内容的正下方。

感谢您的帮助。

来源

2014-01-09 kia4567

它的一些破解，但使用视频容器上的:empty css选择器会在这里修复你。

.video-container:empty { 
    display: none; 
}

当然，如果没有任何视频，在标记中根本不显示视频容器元素是最好的。

来源

2014-01-09 02:25:31 Tim

这是有效的。我从来没有使用过这个CSS选择器。谢谢！这是所有动态填充（如果其他类似的东西与wordpress插件），所以我不能把它完全出来。 – kia4567

使用响应式视频和填充

回答

相关问题