ZURB Foundation - 在一个部分内使用Flex视频

时间:2013-05-29 19:10:33

标签: responsive-design zurb-foundation

我正在尝试在ZURB Foundation Section(又名标签)中添加Vimeo视频。整个<section>都是响应式的,标签内的视频也是如此。为了使视频播放器具有响应性,我正在使用Foundation的内置Flex Video

当打开包含视频的部分时,<section>的高度为零(或接近零)。我曾尝试使用reflow方法,但没有运气。

有没有办法在打开该部分后重新绘制<section>或其内容?

这是问题的JSFiddle - http://jsfiddle.net/brettdewoody/8KKGS/

2 个答案:

答案 0 :(得分:1)

伙计这是一个问题我提出了一个问题。我相信基金会采用的方式不是最好的方法。

这是由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

希望这有帮助

答案 1 :(得分:0)

经过一些修修补补后,我发现了一个使用占位符图像来维持正确大小的黑客解决方案。需要注意的是,图像必须与视频的比例相同(或几乎相同)。不完美,但它的确有效。

我还必须更改<section>的HTML,但没有什么重要的。

这是JSFiddle showing the solution

希望它可以帮助有人在路上。