Remove background video for mobile only on one page of site

Good afternoon, 

A background video that looks great on the main website interferes with quick loading on a couple of pages on the mobile. Ideally I would just like it to not load or play when viewed on the mobile.

None of the solutions on this previous thread seem to work.

i.e., I have tried both the following on saved in the custom CSS file (which works for other CSS items)

Quote

@media only screen and (max-width: 768px) {
 #collection-664fb7ec3e513a00a40eab40 .sqs-video-background .custom-fallback-image {
   display: block;
   opacity: 1;
 }
 #collection-664fb7ec3e513a00a40eab40 .sqs-video-background iframe {
   display: none;
 }
}

section[data-section-id="664fb7ec3e513a00a40eab43"]
/* Mobile show fallback image */
@media screen and (max-width:767px) {
[data-section-id="664fb7ec3e513a00a40eab43"] .sqs-video-background-native__video-player.video-player {
    display: none !important;
}
[data-section-id="664fb7ec3e513a00a40eab43"] img {
    opacity: 1 !important;
}
}

 The website page I am working on is: https://gerbil-cylinder-gwgc.squarespace.com/about

This is my first build on squarespace so I may simply have not enabled something somewhere.

Thanks in advance

Adam

Which video are you referring to?