display videos without backround

Hi! I just tried adding the same html to my site to open your video. And I believe I see what you mean. For me, I get white stripes at the top and bottom (more than a border).

This is because the aspect ratio of the lightbox is different than your video. And the part of the lightbox that goes beyond the video background shows the white lightbox background.

I’m wondering if you can try adding the following CSS to your site:

.fancybox-inner {
    aspect-ratio: 1.896 !important;
    height: auto !important;
}

Note that if you using the lightbox for other things (images, etc) on other pages, the CSS will apply to everything. So you may need to limit this css to the particular pages where you are loading videos, which you can do by using the page or post id from the body class (ie, .page-id-99 .fancybox-inner { css here }.

What this does is (a) remove the fixed height, and (b) let the aspect-ratio determine the height. I played around with values the aspect-ratio, and the exact number above seemed to match the video in the link above.

Thank you for the answer. I tried it but it didn’t work, the stripes are still there.

Using Elementor, I add the CSS to the HTML widget of the video/lightbox, then also to the container and then to the entire (single)page. I regenerated CSS for Elementor and refreshed the cache. But there wasn’t any change at the video. Anyway it could be that there is somewhere an issue with the cache but I tried it sometimes without success.

Is the CSS certainly correct?

Any chance you could share a link to the page? I can check it.

The link is e.g. this page: https://christoph-rummel.de/inout-engl/
There are two videos to find, the first one with the stripes.

But this issue seems to appear also on other screens with all videos. When I watch the website on my laptop screen, the stripes are bigger.

On my mobile I also have stripes or a border. It think it would be better to find a more general solution.

• This reply was modified 7 months, 4 weeks ago by wpchr123.

P.S. One last info: In the plugin settings: Tab “Fancy Box Classic: iFrames” I set for width: 1920 and for hight: 1080.

Hi – I didn’t account for different FancyBox versions. You are using Legacy, and the markup is different. So let’s try this.

1. One the settings page, set that height setting to ‘auto’.
2. For css, try this:

#fancybox-wrap {
    height: auto !important;
    top: 50% !important;
}

#fancybox-content {
    aspect-ratio: 1.896 !important;
    height: auto !important;
}

I actually think that top: 50% won’t be quite right. Prob needs to be more like top: 40%, but it will behave a bit differently depending on screen size, and I think there may be a better way to do that. Let me know if you’re having issues with it being vertically centered.

Thanks, I tried it, it worked somehow, but the video wasn′t centered correctly (it was too much on the top, partly out of view). I tried to use different % values, but I guess it will look different on other screens…
It changes also the look of the other videos (I have white stripes on the sides)

It seems, the best and easiest way for me would be, to leave everything like it was BUT using just a black background for the wrap/stipes, which would look cleaner and not so disturbing then the white.
Is there any CSS for this?