I´m using the lightbox plugin for showing videos on my website. The videos are stored on this platform: https://www.videolyser.de/ Nearly all videos are in resolution 1920×1080. One video is in 4096×2160. When this video is opened in the lightbox a white border is appearing above and below (seems to be the background of the lightbox).
Is it somehow possible to change this for this video only? I tried already some settings but without any success.
If I watch all of my videos on a mobile screen, I have the white border on all videos. Same question here: is it possible to change it in general, so that all videos are displayed without background? In a perfect size for any screen? Or is it at least possible to change the colour from white to black? (I would also pay for the pro version, but it seems not available).
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.
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?
Viewing 8 replies - 1 through 8 (of 8 total)
The topic ‘display videos without backround’ is closed to new replies.
