Removing black borders on a vimeo iframe embed using CSS?

Question

I am trying to find a way to hide the black strips across the top and bottom of a vimeo video. I thought there might be a way to cover them up with CSS.

I basically

Answer 1

I created a solution for this exact problem using a portion of this github post. Removing Black Bars. It doesn't change vimeo's background color but merely hides it from the viewport.

https://github.com/davatron5000/FitVids.js/issues/130

#myid {
  height: 112.6%;
} 

However, If you add a width using CSS "vw"(viewport width) it will size consistently on any monitor/device without showing the black background. I added a margin so that the iframe will stay centered in the div once the width is shorter.

#myvimeoiframeID {
  height: 112%;
  width: 80vw;
  margin: 0 15% auto;

}

In my parent container that holds the video, I added:

.embed-container {
   padding-bottom: 40.25%;
}

This seems to make sure the video shows in the div. When I removed this section the video disappears but you can still here it play. So there is something that is pretty awesome with the padding-bottom: 40.25%;

I changed the vimeo embedded iframe code to have a height="100%".

So you can add a height to the iframe or you can do it in css. In order to control the height by css, I kept the base height in the iframe at 100% and any adjustments to that base height is through the css.