Vimeo embed black bit at top and bottom

[makingthingswork]

Anyone know why the black bar appears at the top and bottom of a Vimeo embed?

My container div hasn't been resized yet and the initial size is set to the same aspect ratio as the share embed code when I set the width to 620px eg. 620px x 378px

Is it possible to remove this?

[Buzejka]

I don't know if this "the right way" of doing something like this, but I found this useful, when I had the same problem.
I'm using Bootstrap and have the wrapper and iframe in a span8 div. This ensures the video also acts responsively.

.video-wrapper {
position: relative;
padding-bottom: 54.1%;
padding-top: 2.2%;
height: 0;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

When resizing the window, the black bars reappear (though vertical), so I've changed the % to

@media (max-width: 767px) {
.video-wrapper {
position: relative;
padding-bottom: 54.15%;
padding-top: 2.4%;
height: 0;
}
}

I hope this helps

[jeffehobbs]

@Buzejka's solution is pretty good -- seems like either way you're going to get letterboxing or pillarboxing (the bars on the sides). I'll look into the possibility that the Vimeo player's aspect ratio might have changed slightly.

[gripestam]

I got it working just fine after removing "padding-top: 30px;" from .embed-container {}

[jeffski]

Removing padding-top: 30px works for me too.

[mvanroon]

^ this

[jeffehobbs]

Sounds like it's time to remove the IE6 workaround. "padding-top:30px" has been removed for all responsive embed wrappers. Thanks, guys!