removing black bars in video

Hi Norman,

I don't see a CSS solution here as the black bar is not margin/padding etc.

It might be best if you check with Elementor on this one.

Let me know if this helps.

Hi Leo,
thanks for answering. I managed to move the video up by screwing around in the inspector. If I add 'margin-top: xxx%;' the video moves up or down. The upper black bar will then be covered by the video, and I might be able to cover the lower black bar with a section + negative margin. Makes sense?

Only problem is I can't write the correct css..

This is where I screwed around in the inspector:

#player, .fallback, body, html, iframe

width: 100%;
height: 100%;
margin: 0;
margin-top: -3.06%;
padding: 0;
background-color: #000;
overflow: hidden;

I really wouldn't recommend fixing this with CSS (negative margin etc..) as it will likely cause some responsive issues.

Have you checked with Elementor? I would assume they have better ways to fix this or an alternative way to insert the video.

Okay, will do. Thanks!

Hi Norman, I'm just another GP user passing by but I have a solution for you :)

The reason the black bars are showing is because your video is an aspect ratio other than 16:9, but you've set the ratio to 16:9 in Elementor when you embedded it. For responsive 16:9 embeds the bottom padding is set to 56.25%, but your video needs a smaller percentage.

If you will only be using videos this aspect ratio or you have a way to apply on a per-page basis, you can use the following:

.elementor-aspect-ratio-169 .elementor-video-wrapper {
    padding-bottom: 38%;
}

If you will be using other videos with 16:9 aspect ratios and your CSS is loaded sitewide, you should do this instead:

.page-id-51 .elementor-aspect-ratio-169 .elementor-video-wrapper {
    padding-bottom: 38%;
}

Hope that helps!

holy cow, it worked!
I've been busy with it all day, thanks a lot :)

@wekhter Thanks for helping out :)

@wekhter

So I used this piece of css:
.page-id-51 .elementor-aspect-ratio-169 .elementor-video-wrapper {
padding-bottom: 38%;
}

However, I'd like to switch the video from a Vimeo video to a Youtube video, because I don't want the controls to show. If I change the settings from Video to YT, the css doesn't seem to work anymore.

Also, I added the Youtube video below the Vimeo video, but I'm not sure what the css should be to make the height the same as the upper one. I probably only need to change the page id?

Thanks!

These instructions should work for any video: https://docs.generatepress.com/article/responsive-videos/

@Norman I don't see the YouTube video at your link so I can't know for sure what's going on, but I can explain how the CSS works and maybe that will help?

From what I can see (I have never used Elementor, just glanced through their docs), when you place a video element it lets you choose whether the video is 4:3 or 16:9 aspect ratio and applies a css class for which one you choose. In your case, you have the video set to 16:9 so you're looking at .elementor-aspect-ratio-169

16:9 = 9/16 = 56.25%, so Elementor automatically applies .elementor-aspect-ratio-169 .elementor-video-wrapper {padding bottom: 56.25%;} (In the doc Tom linked above, that is why the padding line is commented 16:9)

Your video's aspect ratio comes out to 38%. (If it was a 4:3 video, it would be 4:3 = 3/4 = 75%)

If your YouTube video was added the same way as the Vimeo video, then I'd check to make sure that you also set it to 16:9 because the CSS I gave is only targeting videos set to 16:9.

If the YouTube video is on a different page, then you'd alter .page-id-51 to the new page id.