Menu icon Foundation
Black bars around Flex Vimeo Video

Hi,

I am inserting a Vimeo video using flex but i am getting a black bar at the top and bottom of the video. I have looked at this discussion about it but the solution doesnt work that well:

https://github.com/zurb/foundation/issues/3575

I can get rid of the black bars by using a bottom padding of 52.5% on a large screen but when the screen size changes i still get small visible black bars.

Any suggestions for this?

Thanks!

vimeoflex video

Hi,

I am inserting a Vimeo video using flex but i am getting a black bar at the top and bottom of the video. I have looked at this discussion about it but the solution doesnt work that well:

https://github.com/zurb/foundation/issues/3575

I can get rid of the black bars by using a bottom padding of 52.5% on a large screen but when the screen size changes i still get small visible black bars.

Any suggestions for this?

Thanks!

Rafi Benkual almost 5 years ago

Can you post a link to an example so we can add that to the GitHub ticket. The Pull Request on it was conflicting with other stuff.

Dorian Scheidt almost 5 years ago

class="flex-video vimeo widescreen"

Joe Workman almost 5 years ago

Adding a bottom padding of 56.34% definitely fixed this for me.

Brett DeWoody over 3 years ago

If you're using SCSS the values for $flex-video-padding-top, $flex-video-padding-bottom and $flex-video-margin-bottom will also help. Setting these to 0, and changing $flex-video-widescreen-padding-bottom to my video's proportions resolved the issue for me.