Background video banner

[richforma]

Hi team 

i have put a video on the background of my store playing on loop.

the video is fine in both desktop and Android devices , however in ios , it does not play on Autoloop 😞 

1. can you please assist in correcting it to play on Autoloop on iOs devices as well ?

2. i want to integrate the header menu with the video ( showing on layers, video and on top of it menu on white color  ) 

below is the custom liquid i have put 

::

<style>
Video {
display: block;
margin: auto;
width: 100%;
height: 25%;}
</style>

<video autoplay loop playsinline muted>

<source
src="https://cdn.shopify.com/videos/c/o/v/83c6ca631e7648bc88d40fdd27e57c33.mov">

</video>

[ZenoPageBuilder · Accepted solution]

You can move the custom code to the very beginning of base.css and the issue should be fixed on mobile

About the 2nd question, to know the class of an element, you need to learn how to use the Chrome Inspect tool. It is a useful skill on your belt because you can use it again and again in the future. You can search on Youtube for a tutorial on using Chrome Inspect tool.

[ZenoPageBuilder]

Hello @richforma 

Most modern mobile browsers block auto playing video to save bandwidth and battery.

So in short it is not possible to auto play video on mobile.

[richforma]

it is happening only with i phone , other android devices play it on loop immediately while launching the page . 

i have another inquiry  ; i have been having a hard time with black colors hiding some sections , like the cart quantity ( including the remove button  , result search ( bar ) and while clicking the cart it gives a black  background hiding all info 

please see the below :

[ZenoPageBuilder]

Hello @richforma 

Android devices can autoplay if only sound is muted. Even if that is the case, some Android browsers still block autoplaying videos.

About the 2nd question, can you share the store URL so I can check the issue? If it is password protected, please share the password also.

[richforma]

Sure 

: https://richforma.net/

[ZenoPageBuilder]

You can add this code to base.css

.drawer__inner {
    background-color: white;
}

.drawer__inner .cart__checkout-button {
    background-color: black;
}

The result

Hope that helps! 

[richforma]

Hi 

i did , but still black the background 

[ZenoPageBuilder]

Then you can add !important like this

.drawer__inner {
    background-color: white !important;
}

.drawer__inner .cart__checkout-button {
    background-color: black !important;
}

[richforma]

Look 😕 still 

[ZenoPageBuilder]

Then please add one more line

:root {
    --color-background: white !important;
}

[richforma]

Thank you so much it was fixed in all areas search bar ..etc  😀

i still have only one issue, the checkout button from the cart is still invisible and can not fix it 

[richforma]

Hello 

i already fixed that the checkout button too , please ignore it

but unfortunately all the codes and correction we have made were only on desktop version , from the mobile it is still the same 😟

[richforma]

Please I have another inquiry ; 

How can we locate classes that are in the drawer from the below screenshot, i want to modify this  .css. 
for example, in the drawer there is a button with class="button", but I am not able to locate it in order to change the background to black.

in the red square , there is a button ( continue shopping ) but it is not showing!

[ZenoPageBuilder · Accepted solution]

You can move the custom code to the very beginning of base.css and the issue should be fixed on mobile

About the 2nd question, to know the class of an element, you need to learn how to use the Chrome Inspect tool. It is a useful skill on your belt because you can use it again and again in the future. You can search on Youtube for a tutorial on using Chrome Inspect tool.

[richforma]

Hi , i did but it is not fixed , still same in mobile , turned transparent instead of white 

[richforma]

it has been fixed now , i moved all three lines to the top and showing correct in the mobile .

The only bar not showing is the continue shopping button when the cart is empty 

[ZenoPageBuilder · Accepted solution]

You can append this code

.cart-drawer__empty-content .button {
    background-color: black !important;
}

The result

[richforma]

Appreciate your  continuous support 

Thank you ! 

[ZenoPageBuilder]

You are welcome 🙂