Removing black borders on a vimeo iframe embed using CSS?
For your use case, I don't think you'll be able to use just css.
Usually we add letterboxing or pillar boxing around video iframes to keep the height and width at a certain ratio for presentation. But in that case, the black borders would just be as simple as a css background.
To keep things responsive, you would set the height to something like zero (like you have) and use the padding hack to keep the aspect ratio of the video (in this case a 16:9 video; 9/16 * 100 = 56.25%). That number would be either your padding-top or padding bottom value. Since the padding is measured with percent, this scales the padding in relation to the width keeping the correct ratio no matter what width you size the video to.
In your case, this video actually has the letterboxing in the actual video which you can see from the source of the video tag within the iframe. I'm not sure why you have the padding-top:30
but that makes the black borders even bigger. You'll need to hack your situation even more though because of the built in letterboxing. I put together a jsfiddle demo here which includes a few comments but it uses JS to achieve what you're looking for.
The concept for the code is as follows:
- You want the outer container to crop off the bottom and top of the
video. Assuming you wanted the video to be responsive, and be cropped, you need to always have the actual video be larger than the outer container which masks it. - The video should be moved up in relation to how wide the video is vs the thickness of the top border
- You'll want to shrink the height of the outer container a bit to compensate for the negative top margin yet still hide the bottom portion of the video
Personally I don't like doing expensive DOM operations on resize which maybe is the reason you asked for solely css but FWIW, you have the demo.
Ideally your best option would be to get the video re-recorded without the letterboxing so all you would need is the padding hack.
how to remove border from embed video (squarespace)
I'm not sure if I understood, anyway I think you could play a little bit with CSS. I made a container smaller than the video to hide black "borders" in this example http://jsfiddle.net/ungarida/w9qkv2oc/
http://jsfiddle.net/ungarida/w9qkv2oc/2/
html, body {
padding: 0;
margin: 0;
background-color: #efefef;
}
#container {
padding: 0;
margin: 0;
height: 300px;
width: 580px;
background-color: white;
display: block;
overflow: hidden;
position: relative;
}
video {
padding: 0;
margin: 0;
width: 600px;
position: absolute;
top: -40px;
left: -10px;
}
CSS 1 px border with responsive bootstrap, Vimeo embed, and WordPress theme
This answer is incorrect. .player .video-wrapper is in the HTML document loaded into the iframe, therefore !important does nothing since the iframe literally loads a different web page inside of the frame which is in no way affected by the local CSS. There have been multiple reports of this problem on Vimeo over the past year, and they are essentially non-responsive.
My solution was just to put my iframe inside a div with position: absolute, top: 0, left: 0, width: 100%. That width is 100% of the parent of the div, which in my case is constrained by the column widths in my responsive layout. This actually works, unlike the answer previously marked correct.
Related Topics
How to Make Padding:Auto Work in CSS
How to Over-Ride an @Media CSS for a Material-Ui React Component
Which CSS Pseudo-Classes Don't Have Specificity
CSS Customization in a Bookdown Document
Div Side by Side Without Float
How to Remove The Arrows from Input[Type="Number"] in Opera
Remove Dotted Outline from Range Input Element in Firefox
Shinydashboard - Change Background Based on Selected Tab
Checkboxes with Font Awesome 5 Icons
CSS Attribute Selector + Descendant Gives a Bug in Webkit
:Before and :After Pseudo Elements on HTML Tag Is Wonky in Chrome
Placing a Fixed Element Above Browser's Scrollbar
Align Text to The Bottom of a Div
When 1 Px Border Is Added to Div, Div Size Increases, Don't Want to Do That