SOLVED: Background video offsets left 50% when language is RTL

Bugs
1

hi im trying to add a background video, the video start from the center of the container LEFT. so the right side is empty, and on the left side there’s half of the video. when the other half of it cut out.
this is a container, without any settings , just width, height and the video background.

want it to be centered, to fill the container.

ok I discovered that when the site language is Hebrew - RTL it happens. when I switch to English the video bg is fine

Screenshot 2024-06-05 at 13.24.11
Screenshot 2024-06-05 at 13.24.111022×635 155 KB

[Please describe this bug in as much detail as possible so we can replicate & debug this bug]

2

stuck with this and can’t solve it for hours. help will be much appreciated.

3

Hey @yondesign,

can you share a URL to see the issue in action? Probably solvable with some custom CSS.

Best,

André

4

Hi Yon,
Welcome to the forum!

I reproduced the issue and added it to our bug tracker.

As a temporary workaround, you can add the following custom CSS to the element that contains the background video:

%root% .bricks-background-video-wrapper iframe {
  transform: translate(0%,-50%);
}

Best regards,
timmse

5

Hi @timmse

I am facing the same problem, I also tried to solve the problem but I am not able to solve it yet

I tried this code and it did not solve the problem

%root% .bricks-background-video-wrapper iframe {
  transform: translate(0%,-50%);
}

If you could help me out with the issue until the update is released, that would be great, because the site I’m currently working on needs to be finished quickly.

Kind Regards
mohamed

6

Hi Mohamed,
Can you provide me with a live link so I can see the issue?

7

Hi @timmse
Thanks for the quick response.
I sent you the project link in your Direct messages.

This link shows live examples to preview the mentioned error
https://try.bricksbuilder.io/t61098d7/test/

First, clarify the problem
When a video is displayed in the background, it appears only at 50% on the RTL version as shown in the image.

IMG-RTL
IMG-RTL1327×450 200 KB

I used the code mentioned in the previous comment but it did not solve the problem with video hosted on WordPress.

But the issue is solved with video hosted on YouTube only.
HOWEVER, When the screen size changes in the browser (zoom in/out), there is no response on the screen. The page must be reloaded in order for it to appear in full width

IMG-RTL3.PNG
IMG-RTL3.PNG1314×492 40.5 KB

So the problem now with this code is that it does not solve the problem of videos hosted on the WordPress website itself.

I hope there is a css code that addresses this error for videos hosted on WordPress, or that there is a solution to this problem to be corrected in the next updates.

Kind Regards
mohamed

8

Hey mohammed. try to paste the link to the video one field above the video field .
In the external image link field.
I think it worked for me.
I have a site with a video bg that had same problem i think it was the temporary solution.

9

Hey Mohammed,
for videos hosted locally, the selector is different:

This should work in both cases:

%root% .bricks-background-video-wrapper iframe,
%root% .bricks-background-video-wrapper video {
  transform: translate(0%,-50%);
}
10

Hi everyone,
The issue was solved using this last code. :partying_face:

Thank you timmse for the help
Thank you yondesign for the help

Kind Regards :heart:
mohamed

11

Hi guys,

We’ve fixed this issue in Bricks 1.10, now available as a one-click update in your WordPress Dashboard.
You can see the full changelog here: Bricks 1.10 Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
M