Streaming live at 10am (PST)

Background video - how to replace w/ image on mobile + don't load vid asset

I would like to replace a background video in a site I’m building with a static asset for tablets and smartphones, and make sure the browser doesn’t download the ~2mb video file unnecessarily when on those devices.

I have read some posts which say you just need to hide the background video layer and show something in its place to achieve this, but this does not stop the browser from downloading the asset as far as I can tell.

Is there any best practice for this?

Here is my site Read-Only: LINK