Custom Liquid

[NOT1]

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>

[BSSCommerce-B2B]

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

<style>
    @media screen and (max-width: 749px) {
        video.for-mobile {
            width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        video.for-desktop {
          display:none;
        }
    }

    @media screen and (min-width: 750px) {
        video.for-desktop {
            width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
        video.for-mobile {
          display:none;
        }
    }
</style>
<video muted autoplay playsinline loop class="for-mobile">
    <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>

<video muted autoplay playsinline loop class="for-desktop">
    <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>

[NOT1]

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

[BSSCommerce-B2B]

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

[NOT1]

I think  I am getting confused 

[BSSCommerce-HDL · Accepted solution]

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

<style>
/* Default to hide the video for mobile */
.section-template--23255317348648__custom_liquid_CXYkNG-padding 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>

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  😍

[NOT1]

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

[BSSCommerce-HDL]

Hi @NOT1, Pls try again with this code: 

For hidden mobile - show desktop

<style>
/* Default to hide the video for mobile */
.section-template--23255317348648__custom_liquid_CXYkNG-padding video {
  display: none;
}

/* Show the video only for desktop screens */
@media only screen and (min-width: 1024px) { /* Adjust the min-width value as needed */
 .section-template--23255317348648__custom_liquid_CXYkNG-padding 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>

For show mobile - hidden desktop 

<style>
@media screen and (max-width: 749px) {
.section-template--23255317348648__custom_liquid_9bbAeR-padding video {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
}
@media screen and (min-width: 750px) {
  .section-template--23255317348648__custom_liquid_9bbAeR-padding 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>

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 😍

[NOT1]

Thanks this worked perfectly 😍

[BSSCommerce-HDL]

@NOT1, No problem. Glad to help you 😍