Add Background Videos to Your Website's Design: A Complete Guide

Add Background Videos to Your Website's Design: A Complete Guide

By Michael Thompson

January 9, 2025 at 10:20 PM

Start by opening your site editor and navigating to the section where you want to add a background video.

Background videos can enhance your website by adding dynamic visual elements behind your content. Here's how to add them effectively:

Preparation Requirements:

  • Video length: 40 seconds or less
  • Resolution: 1080p minimum
  • Frame rate: 60 fps ideal
  • Format: Landscape (16:9 ratio)
  • File size: Keep minimal for fast loading
  • Movement: Limited and smooth
  • Maximum: 2 background videos per page

Adding Your Background Video:

  1. Upload Method (Version 7.1):
  • Open Pages menu
  • Click Edit
  • Select section's edit icon
  • Choose Background > Video
  • Click + icon to upload or add URL
  1. Video Platform Method:
  • Upload to YouTube/Vimeo
  • Set video to Public/Unlisted
  • Enable embedding
  • Copy share URL
  • Paste into video URL field

Optimize Your Background Video:

  • Add mobile fallback image
  • Apply filters if needed
  • Adjust playback speed
  • Set background width (edge-to-edge or inset)
  • Configure overlay colors
  • Test on multiple devices

Best Practices:

  • Center main subjects
  • Avoid quick cuts
  • Minimize flashing content
  • Ensure text remains readable
  • Test loading speeds
  • Check mobile display

Remember:

  • Videos may not play on power-saving devices
  • Quality depends on visitor's connection
  • Some templates have specific restrictions
  • Maintain accessibility guidelines

To Remove/Disable:

  1. Switch to background image, or
  2. Delete video to free up storage
  3. Save changes

Note: Version 7.1 websites include 30 minutes total video storage.

Related Articles

Previous Articles