My header background video does not auto-play on Mobile.

[LSAccounting]

https://elnisfinancials.myshopify.com/

My website on desktop is starting to look good however, the mobile version is not the best. 

The header video does not Auto Play and my Menu will not open. 

Can someone help me fix those?

TIA.

[dws_pvt_ltd]

Hello @LSAccounting 

1) Go to Online Store
2) Edit Code
3) Find your section video.liquid or your section videobox.liquid 
4) Add the following code in the bottom of the file add css

<style>
  /* old css */
  @media screen and (max-width: 767px) {
    .videoBackground .fullscreen-video-wrap {
        z-index: 3;
    }
  }
  /* new update css */
  @media screen and (max-width: 767px) {
    .videoBackground .fullscreen-video-wrap {
        z-index: 2;
    }
  }
</style>

let`s see the screenshot. Now the mobile menu opens and closes. looks fine.

Best Regards,
Dws_pvt_ltd

[LSAccounting]

Hi, 

Thank you.

However, the Menu on Mobile only opens when I scroll down past the Header Video. 

If I open the website and click on Menu straight away nothing happens.

I have to scroll down then click on Menu and then it opens up. 

Please, kindly check on your Mobile Device and see if you can help me. 

TIA

[dws_pvt_ltd]

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file -> Save

@media screen and (max-width: 767px) {
    .videoBackground .fullscreen-video-wrap {
        z-index: 0 !important;
    }
}

Please add and check it. Thank you!

[Sweans]

Hi @LSAccounting ,

To fix your menu, please insert the following CSS at the end of your base.css file.

.videoBackground .fullscreen-video-wrap{
z-index: 0;
}

If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!

Regards,
Sweans