Video Background not being affected by code

Technical Q&A
1

Hello, I used this video to create a video background. https://youtu.be/KWl_CtofHQo

After doing this I created a banner and a review background video. However, I want to make the review video smaller in height. I can do this in inspect as I change the min/max height of .videoBackground .videoBox but when I edit the code in edit code nothing happens. What am I doing wrong?

Website: https://www.datapathusa.com/

2

Hi @ScottHureau ,

You still have to adjust the height of the videoBox.

height: calc(70vh - 165px);
3

editcode.PNG
editcode.PNG324×385 7.25 KB

inspect.PNG
inspect.PNG224×193 4.61 KB

I change it in edit code, however it seems to not apply to the background as shown with the inspect code from our website. Ive even changed the min and max height yesterday and it still did not change. I’m wondering why the code isn’t changing from edit code to our website.

4

@ScottHureau

Try to put !important. See example below.

height: calc(70vh - 165px) !important
5

editcode2.PNG
editcode2.PNG395×366 6.69 KB

inspect.PNG
inspect.PNG224×193 4.61 KB

It seems that doesn’t work either. Wouldn’t it change the inspect if it was to change in edit code?

6

I don’t know if it could also be other code that has to change, but when I change it on inspect through .videobackground .videobox it in fact does change but not in edit code. Could this be a shopify’s system problem?

7

@ScottHureau

I do not think it is Shopify. Do you use javascript on this code? It could be rendered via javascript. I would reach out to the owner of the code and ask if he can do something

8

I have no idea, and I’ll see if I can get in contact with the guy, thanks.

1 Like