我正在尝试在 ZURB Foundation Section（又名标签）中添加 Vimeo 视频。整个<section> 是响应式的，标签内的视频也应如此。为了让视频播放器响应，我使用了 Foundation 的内置 Flex Video。
打开包含视频的部分时，<section> 的高度为零（或接近零）。我曾尝试使用 reflow 方法，但这条路线没有运气。
有没有办法重新绘制<section>，或者在打开该部分后它的内容？
这是问题的 JSFiddle - http://jsfiddle.net/brettdewoody/8KKGS/
【问题讨论】：
标签： responsive-design zurb-foundation
伙计们，这是我提出的问题。我认为 Foundation 应用样式的方式并不是最好的方法。
这是由于将 padding-bottom = 0 应用于节中的最后一个元素造成的。您现在可以通过将其放在 .scss 某处来覆盖它：
.flex-video {
padding-bottom: 67.5% !important;
}
这里有一个永久修复的拉取请求： https://github.com/zurb/foundation/issues/2412
我提出的一个问题是为了解决这里的填充问题： https://github.com/zurb/foundation/issues/2502
希望对你有帮助
【讨论】：
经过一番修修补补，我找到了一个 hack-ish 解决方案，它使用占位符图像来保持正确的大小。一个警告是图像必须与视频的比例相同（或几乎相同）。不完美，但它有效。
我还必须稍微更改 <section> 的 HTML，但没什么大不了的。
这是JSFiddle showing the solution。
希望它对未来的人有所帮助。
【讨论】：