Background video not working on second time loading the homepage

I added a background video on the homepage of my website. When I first open the page everything works fine but when I go to another page and return to the homepage the following errors occur:

- In the desktop version appears a white frame on the left side. The video is scrolled to the right and is no longer displayed completely.
- In the mobile version the video will not load until page scrolling begins a little.

Hope someone can help me with this issue.

I use the Divi theme in Wordpress.

 

Thank you for your answer
Here is my url https://trufitnessgym.de/startseite-build/

 

Thank you very much for sending me the CSS Code, the video works now perfectly on the desktop version!

However, there is a new issue that has surfaced in the mobile version. When I initially open the page, the video is displayed with a zoom effect, but as soon as I start scrolling, the video appears in the correct size.

I appreciate your help!

 

The code has worked like magic and the video now works perfectly in both versions (desktop and mobile). Again thank you very much for the support.

 

Hello again. I just realized that on the tablet the video has the same problem as before on the mobile version 'when I initially open the page, the video is displayed with a zoom effect, but as soon as I start scrolling, the video appears in the correct size'

It is possible to change something on the code to make it work on all devices? Appreciate your support!

 

Hello, unfortunately the problem is back in the mobile version. This time the video doesn't play, you only see a black space and the play button in the middle of the screen.

Here is my url https://trufitnessgym.de/startseite-build/ Could you check it and if possible explain me how to solve this issue?

Thank you so much!