我正在尝试在ZURB Foundation Section(又名标签)中添加Vimeo视频。整个<section>
都是响应式的,标签内的视频也是如此。为了使视频播放器具有响应性,我正在使用Foundation的内置Flex Video。
当打开包含视频的部分时,<section>
的高度为零(或接近零)。我曾尝试使用reflow
方法,但没有运气。
有没有办法在打开该部分后重新绘制<section>
或其内容?
这是问题的JSFiddle - http://jsfiddle.net/brettdewoody/8KKGS/
答案 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。
希望它可以帮助有人在路上。