Removing black borders in vimeo iframe using CSS?

Question

I'm trying to find a way to hide the black bars at the top and bottom of the Vimeo video. I thought there might be a way to cover their CSS.

Basically, I wanted to achieve what this person wanted with the image in the link below, except that I want to do this with the embedded video, while preserving the repons.

Removing black borders 4: 3 on youtube thumbnails

Thank you very much.

HTML

<section class="d5-d13 c5-c13 b5-b13 a5-a13 video"> <div class='embed-container'> <iframe src='http://player.vimeo.com/video/69252713' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div> </section> 

CSS

 .embed-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

Answer 1

In your use case, I don't think you can only use css.

Usually we add a mailbox or pillar box around the video clips to maintain the height and width in a certain ratio for the presentation. But in this case, the black borders will be as simple as a css background.

To maintain responsiveness, you should set the height to about zero (like yours) and use a hacker robe to maintain the aspect ratio of the video (in this case, the video is 16: 9; 9/16 * 100 = 56.25%). This number will be either your top or bottom padding value. Since padding is measured as a percentage, this scales the indentation with respect to the width, maintaining the correct ratio, no matter what width you occupy to fit the video.

In your case, this video actually has a mailbox in real video, which you can see from the source of the video tag in the iframe. I'm not sure why you have padding-top:30 , but that makes the black borders even bigger. You need to hack the situation even more, though because of the built-in mailbox. I put together a jsfiddle demo here , which contains a few comments, but uses JS to achieve what you are looking for.

The code concept is as follows:

• You want the outer container to crop the bottom and top of the video. Assuming you want the video to respond and crop, you always need the actual video to be larger than the external container that masks it.
• The video should be moved depending on how wide the video is and the thickness of the top border.
• You need to slightly reduce the height of the outer container to compensate for the negative top margin, but still hide the bottom of the video.

Personally, I don’t like doing expensive DOM operations when resizing, which is probably the reason why you asked exclusively for css, but FWIW, you have a demo.

Ideally, the best option would be to overwrite the video without a mailbox, so all you need is a gasket.

Answer 2

Cut 1px from all edges with CSS:

 .embed-container { position: relative; padding-bottom: 43%; /* Aspect ratio of the video */ height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: -1px; left: -1px; width: calc(100% + 2px); height: calc(100% + 2px); } 

Answer 3

HTML:

 <div class="js-video [vimeo, widescreen]"> [video html goes here] </div> 

CSS

 .js-video { height: 0; padding-top: 25px; padding-bottom: 67.5%; margin-bottom: 10px; position: relative; overflow: hidden; } .js-video.widescreen { padding-bottom: 57.25%; } .js-video.vimeo { padding-top: 0; } .js-video embed, .js-video iframe, .js-video object, .js-video video { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } 

You will find more information here.

Answer 4

I had the same problem and the problem was easy to solve. My videos were embedded in Wordpress pages and posts using oEmbed. Wordpress wrapped my embedded videos in <p> tags, the <p> tags had some margin that caused black borders at the top and bottom of my videos. I used the following jQuery bit to remove <p> tags from inline videos:

 $('.embed-container iframe').unwrap(); 

Answer 5

I solved this problem by removing padding-top in .embed-container

padding-bottom: 56.25%; a 16: 9 screen ratio will be set and remove the black bar above and below. padding top here will add an extra black stripe back.

Answer 6

I created a solution for this exact problem using part of this github post. Removing black bars. It does not change the background color of vimeo, but simply hides it from the viewport.

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

 #myid { height: 112.6%; } 

However, if you add the width using CSS “vw” (viewport width), it will change sequentially on any monitor / device without showing a black background. I added margin so that the iframe remains centered in the div after the width has been shorter.

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

}

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

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

This is similar to what the video shows in a div. When I deleted this section, the video will disappear, but you can still play here. So there is something pretty amazing with padding-bottom: 40.25%;

I modified vimeo inline iframe code to have height = "100%".

So you can add height in the iframe, or you can do it in css. To control the height using css, I saved the base height in an iframe with 100%, and any adjustments to this base height go through css.

Answer 7

Just enter frameborder="0" as one of your attributes.