Custom Liquid

Store Design
,
1

I am using custom liquid for videos on my home page (DAWN)

<style>
@media screen and (max-width: 749px) {
video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
}
@media screen and (min-width: 750px) {
  video {
    display: none;
  }
}
</style>
<video muted autoplay playsinline loop>
    <source src="https://cdn.shopify.com/videos/c/o/v/09bdd39e71294b10860e120d81071262.mp4"
                  type="video/mp4">
    <source src="https://cdn.shopify.com/videos/c/o/v/7c45e26bee364a88bc6f432277057be9.mp4"
                  type="video/mp4">
</video>

This is the code for the video. I have only allowed it for mobile but on pc I have made another custom liquid section and I want that only for PC but I dont know why thats not working and thats also showing in Mobile only here is the code for that also

<style>
/* Default to hide the video for mobile */
video {
  display: none;
}

/* Show the video only for desktop screens */
@media only screen and (min-width: 1024px) { /* Adjust the min-width value as needed */
  video {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}
</style>

<video muted autoplay playsinline loop>
  <source src="https://cdn.shopify.com/videos/c/o/v/7c45e26bee364a88bc6f432277057be9.mp4" type="video/mp4">
  <source src="https://cdn.shopify.com/videos/c/o/v/7c45e26bee364a88bc6f432277057be9.mp4" type="video/mp4">
</video>
2

@NOT1 , Are you using both pieces of code in homepage to display on mobile and desktop? You should change it like this:
3

Yes I am using both pieces of code in homepage to display on mobile and desktop

4

Hi @NOT1 , It is overwritten code. Fix it a bit code like this and it will be ok :heart_eyes:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

5

It worked for the mobile. I mean on the mobile its not showing now but its also not showing in the desktop : (

6

@NOT1 , If you change the code like i’ve commented above it will show 2 videos separately on 2 types of screens

BSSCommerceB2B_0-1726036432977.png
BSSCommerceB2B_0-1726036432977.png1040×732 48.4 KB

7

I think I am getting confused

8

Hi @NOT1 , Pls try again with this code:

For hidden mobile - show desktop

For show mobile - hidden desktop

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

9

Thanks this worked perfectly :heart_eyes:

10

@NOT1 , No problem. Glad to help you :heart_eyes: