ZURB Foundation - Использование Flex Video внутри раздела

Question

Я пытаюсь добавить видео Vimeo внутри ZURB Foundation Section (aka Tabs). Весь <section> реагирует, поэтому видео должно быть внутри вкладки. Чтобы сделать видеопроигрыватель отзывчивым, я использую встроенный файл Flex Video.

Когда раздел с видеороликом открыт, <section> имеет нулевую (или почти нулевую) высоту. Я попытался использовать метод reflow, но не повезло с этим маршрутом.

Есть ли способ перерисовать <section> или его содержимое после того, как раздел был открыт?

Вот JSFiddle вопроса - http://jsfiddle.net/brettdewoody/8KKGS/

Answer 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

Надеюсь, что это поможет

Answer 2

После некоторых мастерить я нашел хак - иш решения с использованием шаблонного изображения для поддержания правильного размера. Одно из предостережений - это изображение должно быть одинаковым (или почти таким же), как и видео. Не идеально, но он работает.

Мне также пришлось немного изменить HTML-код <section>, но ничего серьезного.

Адрес JSFiddle showing the solution.

Надеюсь, что это поможет кому-то по дороге.