Showit Website Design: How To Include Background Videos On Your Mobile Site
Jun 20
One of my favorite parts of using Showit to design all of my client websites—is how easy it is to include video into the design! I especially love those big gorgeous banner and background videos.
So if you’re anything like me, you were probably a little disappointed when you discovered that you couldn’t include those types of background (or canvas) videos on your mobile Showit website design. It’s only an option for desktop websites.
But a few months ago I actually figured out a little hack to make background videos work on the mobile versions of my Showit websites. And I’m going to share my secret with you today, with my latest video:
Episode 118: Showit Website Design
What is Showit?
Before we get jump into my fave Showit website design tip, let’s talk about Showit. If you’re unfamiliar with Showit, it’s a drag-and-drop website builder. And it’s my website platform of choice—I design all of my client’s custom websites on Showit.
If you want to learn more, check out: Top 5 Reasons I Love Showit (And I Know You Will Too).
Why Video?
According to studies 51% of marketing professionals worldwide say video content has the best ROI (or, “Return On Investment”). And marketers who use video grow revenue 49% faster than non-video users. [source]
The internet LOVES video.
And personally, I think websites that incorporate really gorgeous, on-brand videos just connect with their audience better.
That’s why I incorporated a huge background video on the homepage of my website. And I’ve done the same thing with a bunch of my client site designs as well.
So, like I said, when I discovered that I couldn’t include these background videos on my mobile site designs, I was pretty bummed out.
Like I mentioned in my last video—3 Reasons Why Your Mobile Site Is Costing You Clients—Over half of all web traffic now is on mobile devices. [source] And a few years ago, Google even starting using a website’s “mobile-friendliness” to determine search engine ranking.
So your mobile website’s design, and your audience’s experience on your mobile site needs to be a top priority.
How To Add A Background Video On Showit Desktop
Alright, before I reveal my secret for including video on your mobile website, I want to make sure you know how to include it on your desktop version.
Now there are actually two ways to display video on your Showit website. The first is as a canvas background—and that’s what I’m talking about here, today. The second is to embed a video from another source (like YouTube or Vimeo), but that’s a lesson for another time.
So the first thing you need to do is upload your background video to the media library in Showit. And there’s a size restriction. Your video can’t be any bigger than 8mb—which for video, is pretty small. That means the video is short, and it’s low-res. But for a background video, that’s perfect.
Showit wisely restricts the size here, to make sure your site doesn’t take forever to load.
So, once you’ve uploaded your background video, all you need to do is click on the canvas where you want your video. Then click “Canvas Background” on the right-hand menu. In the “Type” dropdown, select video. Then choose the video you want to display.
If you’re planning on having text over your background video, then you’ll want to play with the opacity of the canvas—and you do that right here.
But that’s basically it! Super simple. Now to the tricky part…
How To Include A Background Video On Your Showit Mobile website
Okay, in Showit, if I move over to the mobile side of the Canvas Background, and click on the “Type” dropdown, you can see that “video” is no longer an option.
So what you’re going to do is create a GIF instead.
With Photoshop you can turn your original background video—that you’re using on your desktop version—into an animated gif for your mobile site.
Showit Website Design: How To Create A GIF From Video In Photoshop
I actually learned how to turn videos into gifs in this YouTube video by Dansky—so go check it out, because he does a really great job explaining it.
But basically you’re gonna open your video file in Photoshop and use the “Timeline” window to make any edits. For my own homepage background video, I wanted to make sure that I was keeping that file size small, and staying around that 8mb range.
Remember, having files on your website that are too big can really affect your site loading speed—so you’ll want to stay small too.
To do this I had to cut out about half of my original video (which was already pretty short!) and make some adjustments in the export settings.
Another thing I did was use the crop tool in photoshop to make my video, now gif more vertical for my mobile site.
Showit Website Design: Adding Your Background GIF
So, now that you have your background GIF, go ahead and upload it to your Showit media library—and open the canvas on the mobile side.
Now, you’re NOT going to add it to the canvas background section like you did your video. Because even if you add the gif as an image—it won’t load properly.
Instead, you’re going to add the gif directly to your canvas. And then just move it to the back (or at the bottom of all of your elements) to work as a background video.
For the legibility of your text, you’re actually going to want to make your canvas background a color. Then adjust the opacity of the gif under the effects option in the right-hand menu.
And there you have it! Now you know how to add background videos (they’re secretly GIFs!) on your Showit mobile website.
Let me know what you think! Are you going to use my little hack to add videos to your own Showit website? If you do, leave a link to your site in a comment down below! I’d love to see it!!
Don’t forget to subscribe my YouTube channel—I post new videos on business and branding tips every Thursday. So hit that subscribe button so you don’t miss out.
Not on Showit yet? Well, what are you waiting for?? 🤷🏼♀️
If you’re ready for custom website design that crushes your competition, then get in touch with me asap!
And lastly, don’t forget to grab my FREE workbook—The Brand Blueprint. It’s a 20 page step-by-step guide to help you build a super solid brand foundation.
