Need Header Video Background To Be An Image on Mobile

Hi,

I just tried using this code to make my site only show the mobile fallback image (which is an animated .gif) in the header but on mobile the image shows then transitions into the video background (which we only want to play on desktop).

/* Mobile view */
@media screen and (max-width:767px) {
/* top video */
[data-section-id="61eeca1c45abed068a17018b"] .content-fill>*:not(img) {
    display: none;
}
[data-section-id="61eeca1c45abed068a17018b"] .is-ready {
    display: none;
}
[data-section-id="61eeca1c45abed068a17018b"] img {
    left: -120% !important;
}
}

Can someone help us make this work properly?

Attached is a screen-recording of both the animated image (.gif) and the video playing. We just want the .gif (mobile fall-back image) to play on mobile.

Show you want

Desktop: Show video

Mobile: Show a gif/image

?

https://www.somethingboring.com/