Why isn't my media query changing video on mobile view?

[Loftop]

I want to change a video to a diffrent one when a user is on a phone, I tried to do it with media query and javascript but it doesn't work. I am adding the code to the theme using Custom Liquid section, it looks like this. I was testing to see if the media query would even change the width not the url of the video but it didn't work neither.

<style>
  .header-wrapper,
  footer.footer {
    display: none !important;
  }

  .drawer {
    visibility: hidden;
  }

  .cart__checkout-button {
    max-width: none;
    background: #ffffff;
    color: #000000;
  }

  video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }

  @media only screen and (max-width: 767px) {
    /* Styles for screens smaller than 768px (phones) */
    video {
      width: 10%; /* Change the video width to 100% for phones */
    }
  }
</style>

<video autoplay muted loop playsinline id="myVideo">
  {% if request.user_agent.mobile? %}
    <source src="https://cdn.shopify.com/videos/c/o/v/5eed11de957c41c58a0fe561ea88c92e.mp4" type="video/mp4" playsinline>
  {% else %}
    <source src="https://cdn.shopify.com/videos/c/o/v/069349678509454a95d205f7e240cf62.mp4" type="video/mp4" playsinline>
  {% endif %}
</video>

Here is a link to my website: https://piersclo.myshopify.com

[osamafarooqi71 · Accepted solution]

Hello @Loftop , tou can achieve this using different approaches. One could be to add two videos on code and add classes to both of them like class="desktop-video" and class="mobile-video".

Simply, add the display property of the desktop-video to display:none on mobile and vise versa.

Please do let me know if it helps.

Regards,

Osama Farooqi 

[Loftop]

It worked like a charm thank you!