0

I'm trying to add a Vimeo video inside a ZURB Foundation Section (aka Tabs). The entire <section> is responsive, and so should the video inside the tab. To make the video player responsive I'm using Foundation's built-in Flex Video.

When the section with the video is opened the <section> has zero (or near zero) height. I have tried to use the reflow method but no luck with that route.

Is there a way to redraw the <section>, or it's contents after the section has been opened?

Here's a JSFiddle of the issue - http://jsfiddle.net/brettdewoody/8KKGS/

2 Answers 2

1

Guys this is a problem I raised an issue for. I believe the way Foundation is applying a style to not be the best approach.

This is caused by padding-bottom = 0 being applied to the last element in a section. You can override it for now by putting this in your .scss somewhere:

.flex-video {
    padding-bottom: 67.5% !important;
}

There is a pull request here for a permanent fix: https://github.com/zurb/foundation/issues/2412

and an issue I raised to address the padding problem here: https://github.com/zurb/foundation/issues/2502

Hope this helps

0

After some tinkering I found a hack--ish solution using a placeholder image to maintain the correct size. One caveat is the image must be the same (or nearly the same) proportions as the video. Not perfect, but it works.

I also had to change the HTML of the <section> a bit but nothing major.

Here's a JSFiddle showing the solution.

Hope it helps someone down the road.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.