Height of flex video too large for Vimeo. Black bars show at top and bottom

[adambundy]

Im having an issue with Vimeo video players which get a black bar at top and bottom in all sizes. It seems to be proportional to the height - I assume that's due to the % padding. I noticed that even the Vimeo player on the Foundation Flex Video demo page has these bars:

http://foundation.zurb.com/docs/components/flex-video.html

Could be related to this issue: #3104

[cmwinters]

Hmm interesting. Looking into this.

[canfie1d]

Ran into this in a recent project. Adding top-padding: 7.5% to the video container solved it for me. I believe it is caused by the column's width forcing the container to be taller and the video refusing to scale out of proportion.

[adambundy]

@canfie1d the problem I had was too much padding, thus the black bars. I had to reduce the bottom padding to 56.34% to remove them. As Foundation's own demos have these bars, Im suggesting this as a change.

[drewish]

It's your call on which issue you want to use. I'd put together a fix and spent quite a bit of time to create test cases for the various players and aspect ratios. I hope you'll at least use them to confirm what ever solution you go with.

[cmwinters]

Why was this reopened?

[drewish]

@cmwinters until you closed it it had never been closed. But now both issues that were dealing with this issue have been closed.

[drewish]

So maybe someone will actually look at this issue then?...

[cmwinters]

@drewish could you provide a link to the fix you mentioned? Is it a pull request?

[drewish]

It is but it's gone stale in the 5 months since I'd opened it: #3104

[drewish]

The same one mentioned by the original poster and one that was closed as a duplicate of this.

[adambundy]

As mentioned above, my fix was to change the bottom padding to 56.34% which got rid of the black bars. You can see that adjustment in action here:

http://belljar.tv/projects/pmd-icd-10/

[smileyj68]

This has been fixed and committed to master here a50a16b

Thanks @drewish and @adambundy

[isarmstrong]

Well done smiley. I'm glad I found this post. For the time being, I've just done this in SCSS.
.flex-video { margin-top: 30px; &.vimeo { padding-bottom: 56.34%; } }

[sebastiansulinski]

There's also problem with Google maps - did anyone report it yet? The height goes far beyond the defined height on the iframe.

[isarmstrong]

Perhaps you should show us your code on that one. Something isn't right.
On Jun 17, 2014 2:03 AM, "Sebastian Sulinski" notifications@github.com
wrote:

There's also problem with Google maps - did anyone report it yet? The
height goes far beyond the defined height on the iframe.

—
Reply to this email directly or view it on GitHub
#3575 (comment).

[sebastiansulinski]

Here's the link to the plunker with the problem: http://plnkr.co/edit/PFbzZZ8zIqV75uQdJqnp?p=preview

[isarmstrong]

Perhaps a screenshot would help? I'm seeing this: http://screencast.com/t/NKqQb6Wc1

Which appears to be working as well as possible, given the fact you've omitted any row or column structure. I would normally expect to see something more like...

http://codepen.io/Imperative/pen/10d94dc982197d9a9c0c45d79a662541

Which seems to be operating exactly as intended.

[isarmstrong]

I see the problem.

You haven't added the Foundation .js file
http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/js/foundation.min.js

[isarmstrong]

Here:
http://plnkr.co/edit/5OfpV4Un3QQJ5RtfVNIG?p=preview

[sebastiansulinski]

Well - not quite. If you check the dimensions of the map iframe you'll see that the width is set to 800px and the height is 300px, but the result is much higher - even at the full 800px.

I've added foundation.min.js and the result is the same - I don't think there's any dependency on js for flex-video - is there?

Your example looks the same.

[isarmstrong]

Ah, yes it does seem to be ignoring the hard coded dimensions on the map. Easy CSS workaround though: http://codepen.io/Imperative/pen/10d94dc982197d9a9c0c45d79a662541

[isarmstrong]

Huh, actually that has its own set of mobile issues.
http://screencast.com/t/xiavvN2E01

Let me work on this for a bit and see if I can figure something out.

[sebastiansulinski]

Hmm, but that's not dynamic any more - and the map doesn't really resize - it's only the wrapper that changes dimensions - map gets cropped.

[sebastiansulinski]

Thanks @isarmstrong - perhaps some use of js to help resolve this issue?

[isarmstrong]

It shouldn't be necessary. I'm trying to figure out what's overwriting the value in the iframe, since that's not supposed to happen. I may drop a tweet to Zurb too, if I can't spot it.

[isarmstrong]

Short version - we I think need to use Interchange, not flex video. Video is for, well, video.
http://foundation.zurb.com/docs/components/interchange.html

[isarmstrong]

You can modify the container in SCSS, but it's attempting to conform to standard video frame sizes, not whatever you have specified.

[sebastiansulinski]

Ok - it's a shame as both are dealing with iframe. Using Interchange I'll have to create 3 versions of the same map - not ideal, but I guess it'll have to do for now. Thanks for looking into it for me - appreciate it.

[isarmstrong]

I got about half way through writing a plugin to handle this in WordPress, feel free to grab anything you like from there - https://bitbucket.org/imperative_ideas/locate-us-wordpress-widget/src

Your best bet is to use the Google Maps API. That widget actually geocodes and address in real time.

[isarmstrong]

This is a bit more involved at first blush, but I think it'll work out better for you
http://codepen.io/Imperative/pen/Apmqo/