A video background is a fun way to add movement to grab your visitor’s attention as soon as they enter onto your website, and the process to set it up is SO easy! Join me as I walk you through all the steps! For this walk through I’ll be using our best selling Showit Website Template – Feather & Friend, as the majority of you will be using it as well! If you aren’t using this template, don’t worry. The process will look about the same for any Showit website!
**Please note that, if you are wanting to include longer video such as a video from Vimeo or YouTube, this is a separate process that will have to be embedded onto the website.
Desktop backgrounds are slightly easier to set up than mobile. So starting here in order to set up a video background open either the canvas view tab or canvas background tab. (Reference video settings for which you’ll need to use). Swap the background type from image to video, select the video you will be using and a fall back image. Adjust the video settings as needed (detailed below). And just like that you have a video background! (Though you may need to compress your video to fit Showit restrictions which is the longest part of this process, details on how to do this are below.)
*Canvas View tab : used to have different backgrounds for each canvas view.
**Canvas Background : same set up process as shown here, but used when only one background is used for the canvas.
View Name : Simply labeling this canvas view as one out of five.
Mobile / Desktop tabs : Different processes and content used for mobile set up vs. desktop set up.
Type Dropdown menu : For desktop – video, for mobile – color
Video : Choose the video you want to use as your background from media library.
Fallback Image : Choose an image from the media library. This image is to be used in case the video fails for any reason.
Duration Dropdown Menu : Choose whether you’d like your video to play once through, or continually loop.
Size Dropdown Menu : Options for how your video fits on the canvas.
Position : Choose what area of your video is to be focused on.
Scroll : Options as to how the video will react when the website is being scrolled through.
Opacity : Set the opacity level to alter the amount of transparence of your video and allow the underlay to show through.
Underlay Dropdown Menu : NEW! Choose between having a solid color or a gradient backing your video
Color : Choose the color that you want to back the video, especially important if opacity isn’t 100% (gradient will have you choose two colors to fade into each other)
You may need to compress your video in order to use for your desktop background (to fit within Showit restrictions). My favorite resource for this is the Veed.io video compressor. It’s super simple! Just upload your video, this may take a few minutes to fully upload. Once uploaded choose the level of compression needed to stay under the 8MG restriction (keeping the quality as high as possible) and hit compress. Ensure your video is under 8MG and download.
Once downloaded, open Showit and upload file into the media library.
When setting up the GIF background for mobile there are two ways you can do this. Option one is to place your GIF in the image placement of the canvas view tab / canvas background tab. Though I have had issues in the past of this not working correctly. To avoid those issues I tend to opt for option two. This being to set your canvas background to color, choose the color you’d like. Then add an image to the canvas by clicking the landscape icon at the bottom of the screen. Select your GIF and set to the size of your canvas. (Don’t forget to set your vertical locking, set image to stretch with the screen, like I nearly did in the video walk through!)
When adding a new element (the image) to the canvas it will add it on top of everything else, make sure to pull it to be places under everything by moving the element in the list of elements on your canvas (on the left hand side). You will also want to rename the element to keep your website organized to do this click the three dots next to the element name and choose ‘rename’ and name as “background GIF”.
** Something I forgot to mention in the video tutorial is to hide the image used for the mobile background from desktop. To do this go to the element we labeled as ‘background GIF’ you will see a tiny phone icon and desktop icon. Simply click the desktop icon to hide it.
To convert your video to GIF in order to use for your mobile background. My favorite resource for this is the free, new Adobe Video to GIF Converter. Simply upload your video (use the compact version we made for desktop). Select your desired file size (keep in mind Showit restrictions). (If needed, to fit mobile best) Resize the video to portrait. Then download the file!
Once downloaded, open Showit and upload file into the media library.
If you have any questions as to how to do anything within your Showit website feel free to send us a message requesting a walkthrough!