How to Add a Mobile Fallback Image for Your Video Background
I’m a big fan of using video clips for backgrounds on your website – especially for the top banner area of your site.
The right video will grab visitors’ attention and help demonstrate what you do and the impact you can make in their lives.
It’s an extra way to connect with your audience and either meet them where they’re at, or show them the intangible benefits of what it’s like to work with you.
The problem? Not all mobile devices can play a video background. And even if they can, depending on your internet connection they may not always load.
That means your mobile website could look really different from your desktop version. No video background, maybe just a static color or pattern.
So today I’m going to let you in on one of my secret weapons to help make your mobile site look just like your desktop version.
How to Add a Mobile Fallback Gif to Your Squarespace Website
The trick is really simple and it uses something called the Mobile Fallback Image.
Take your background video clip, and turn it into a gif.
Add the gif as your mobile fallback image on your Squarespace website.
What is a mobile fallback image?
Mobile fallback images show up when your video fails to load or can’t load. They tell Squarespace what you want your website to look like when video fails and are a great extra detail to polish up your site.
Why does a Gif work as a mobile fallback image?
Gifs are actually images taken from a video clip, brought down to a lower quality, and kept stitched together. Kind of like the original “moving picture - movies” from a bygone era, gifs’ unique nature allows them to look like video but be used anywhere you can place an image.
That means that when video cannot load due to a poor internet connection or an incompatible browser–your gif will always load.
My favorite Gif Maker
I love Giphy.com as a gif maker. It has a playful vibe and is easy to use. They’ll also catalog your past gifs for you and allow you to make them public or private.
If you’re just taking one video clip and turning it into an image (a gif), go here and follow the prompts after creating a free account.
And check out these websites I’ve built that use a gif as a mobile fallback image.
FierceCompassion.me
EllenMonsees.com
ExtraordinaryFireflies.com
BespokeWellnessHaus.com
Did this help you? Let me know!
