Rich casino sign up no deposit bonus.Claim Your Free 999 Pesos Bonus Today

Blank space above & below Vimeo embedded video

Fri, 30 Mar 2018 13:21:52 +0000

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

Reply To: Blank space above & below Vimeo embedded video

CrouchingBruin — Sat, 31 Mar 2018 07:14:08 +0000

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.

Reply To: Blank space above & below Vimeo embedded video

Balazs Szilagyi — Fri, 10 Aug 2018 14:39:17 +0000

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.

Reply To: Blank space above & below Vimeo embedded video

CrouchingBruin — Fri, 10 Aug 2018 14:56:51 +0000

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