Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #280370

    We have a Vimeo video on our site at: that is responsive (with HTML and CSS included below) but we don’t like the thick black border around the video. Can you suggest how we could remove this border? If it’s not possible to remove it, would you suggest the CSS that would allow us to change the color?

    The HTML for our video is:

    <div class=”js-video [vimeo, widescreen]”><iframe style=”width:100%; height:100%; frameborder:0; byline:0; title:0;” src=”//″ webkitallowfullscreen mozallowfullscreen allowfullscreen seamless></iframe></div>

    And the supporting CSS is:

    .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;

    Thanks in advance for any help you can offer.


    Hey Jane!

    Did you try another video? I’ve the feeling that the video itself contains the black border. I can also see it if I view it on vimeo: . I.e. our tutorial video: does not have such a border.

    Best regards,


    Hi Dude – Thanks for the heads up on the black border that appears in Vimeo. I created a new video that does not have a black border in Vimeo. When I view it in our site at it looks better than before but it still has black borders on the top and bottom. Maybe there is an additional CSS adjustment I need to make? Do you have any suggestions?
    Thanks very much.


    Quick update – I was able to use the Video media element instead and it all looks fine now. You can mark this issue as resolved.



    Great, glad it works now :)


Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.