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

Design help General
1

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

1 Like
2

Did you find an answer to this @jkbythebay ?

3

Yes but it turns out to be quite complex. You would need to use javascript to dynamically set the source file of the video when document is ready, based on the device. Unfortunately I don’t have time to do an in depth write up right now but might do a blog post eventually. If you are curious to see it working, I have it on my portfolio home page, www.jakelouis.com