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

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

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

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

Вот JSFiddle проблемы - http://jsfiddle.net/brettdewoody/8KKGS/


responsive-design zurb-foundation
person Brett DeWoody    schedule 29.05.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Ребята, это проблема, ради которой я поднял вопрос. Я считаю, что то, как Фонд применяет стиль, не является лучшим подходом.

Это вызвано тем, что 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

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

person Rich Love    schedule 03.06.2013

arrow_upward
0
arrow_downward

Немного повозившись, я нашел хакерское решение, использующее изображение-заполнитель для сохранения правильного размера. Одно предостережение: изображение должно иметь те же (или почти такие же) пропорции, что и видео. Не идеально, но работает.

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

Вот JSFiddle, показывающий решение.

Надеюсь, это поможет кому-то в будущем.

person Brett DeWoody    schedule 29.05.2013