search

jeffehobbs / embedresponsively

Embed Responsively helps web content producers transform fixed width embedded content into fluid responsive embeds.
673 stars 141 forks source link

Vimeo embed black bit at top and bottom #11

Closed makingthingswork closed 10 years ago

makingthingswork commented 11 years ago

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?

screen shot 2013-10-30 at 15 14 52

Buzejka commented 10 years ago

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 commented 10 years ago

@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 commented 10 years ago

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

jeffski commented 10 years ago

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

mvanroon commented 10 years ago

^ this

jeffehobbs commented 10 years ago

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