Some of our themes feature video backgrounds (example). This guide is intended to help you to find a video (if you are not shooting your own) and to prepare it. It is important to read this guide to ensure that your video is optimal for use in a background. If you are not careful with duration, file size and other things, visitors are likely to have a poor experience. This guide makes it easy to get these things right.
Choosing Video
You can either shoot your own video or buy a stock video that meets your needs. Here are some things to consider when choosing a video.
- See our Stock Video Recommendations for video providers offering a variety of prices and quality. Most stock video sellers will let you download a watermarked sample version to test with before you buy the full-size, high quality version.
- A video that is 15 – 30 seconds in duration is usually ideal because it will be long enough not loop too frequently but short enough that the file size can be reasonable after compressing (more on that below).
- Some stock videos have been edited to loop seamlessly. This is not required but is ideal because there won’t be a sudden change between the end and beginning of the video when it starts replaying.
- A slower video with less movement is more suitable for background use than something faster or more abrupt in its motion. The background should compliment your content, not distract from it.
- No audio is needed since background videos play muted in our themes. Not having audio will make the file size smaller, causing it to load faster for the website visitor.
Preparing Video
Raw footage is not suitable for playback on the web. You will need to optimize your video so that it loads quickly enough for users of slower internet connections. You can use desktop video editing software or an online service.
Goal: Convert your 15 – 30 second video to .mp4 (MPEG-4) format and compress it down to 5 MB in file size or less (10 MB absolute maximum). Anything larger could be too big for slower Internet connections to download fast enough for immediate playback. The video should start playing after only couple seconds from the time the page is accessed.
Tips & Notes
- 0.5 MB of file size per second of video is fine for most Internet connections to download in time. This is why we say a 15 – 30 second video should be 5 MB ideally and 10 MB maximum. Keep in mind that other users may have slower Internet connections than you.
- A resolution of 1080p usually creates a file size too big. 720p is usually the best balance of resolution and file size. Try 480p only as a last resort but keep in mind that the visual quality will be much lower.
- Desktop video editing software usually provides more control than a web-based video editing service so you may be able to shave a couple more MB off of your file size that way (reduce bitrate, remove audio track, etc.). See this article for optimization tips relevant to desktop editing software.
- On mobile, our themes will show the image you provide instead of a video because most mobile devices will not auto-play video and mobile access is often too slow for optimal video streaming.
Publishing Video
Go to Appearance > Customize > Widgets > Homepage and place a CT Section widget as the first widget. Use the Video field to upload your file or paste a URL to an externally hosted file (e.g. Amazon S3 or a CDN). This field will only appear when the widget is the first widget. Note that not all of our themes support the CT Section widget.
Important: Also provide Image. It will be shown on mobile in place of the video.
