Blank space above & below Vimeo embedded video

  • A couple months ago Vimeo made a change to their video embeds which has resulted in a large amount of white space being added above and below their videos on wordpress for video with wider aspect rations. This change affects all previous Vimeo embeds – in our case 10 years worth! – so is massively annoying.

    I’ve search for a fix to this but the only thing I’ve found was to add this code:

    /*Remove vimeo space*/
    .player .vp-player-layout {
    top: 0px !important;
    bottom: 0px !important;
    }

    To the Additional CSS file or at the end of the theme CSS file neither of which has fixes the problem.

    Does anyone have an idea of how to solve this?

    Thanks
    MarBelle

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Don’t think you can do it with CSS because the player is located in an iframe, and CSS cannot be used to affect the objects within an iframe.

    This is really frustrating, but there is a css hack to solve this. Just paste the following code into your style.css:

    .fluid-width-video-wrapper {
    padding-top: 60% !important;
    }

    Please note that this is a hack, so might not work correctly with every aspect ratio or with future Vimeo updates.

    I recommend you put your Vimeo iframe inside a div with a special class, so you can control when to use this hack.

    That hack will not work in the example above. First, I don’t see any element on the example page that has a class called fluid-width-video-wrapper. Even if she were to enclose the video in a div with that class, it won’t work, because what it will do is add an extra 60px of padding, not remove the extra space. Second, the extra space is caused by a top: 83px property in a vp-player-layout element, which is inside of an iframe, and as I pointed out in my earlier message, elements within an iframe cannot be manipulated

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Blank space above & below Vimeo embedded video’ is closed to new replies.

Tags