Multimedia makes your website more attractive and keeps visitors on your pages longer. Video and audio content increase engagement, clarify complex topics, and give your brand a personal touch.

Why Add Multimedia

Video and audio offer unique benefits:

  • Visitors stay on pages with video an average of 88% longer
  • Complex products or services are better understood
  • You build trust faster
  • Higher conversions on landing pages
  • Better SEO due to longer dwell time

Adding Video

Method 1: Embed YouTube or Vimeo

The easiest way to add video is through existing platforms.

Embedding a YouTube Video

  1. Open the page in Sitebuilder
  2. Click on the plus icon to add an element
  3. Search for Video or YouTube
  4. Drag the video block to the desired position
  5. Paste the YouTube URL
  6. The video will load automatically

Embedding a Vimeo Video

  1. Add a video block
  2. Select Vimeo as the source
  3. Paste the Vimeo URL
  4. Adjust the settings

Method 2: Upload Your Own Video

Upload your own video files directly to Sitebuilder.

Supported Formats

  • MP4 (recommended)
  • WebM
  • MOV

Recommended Settings

  • Resolution: 1080p or 720p
  • Codec: H.264
  • Maximum size: 100MB

Uploading

  1. Add a Video element
  2. Select Upload File
  3. Select your video file
  4. Wait for the upload to complete
  5. Configure the playback option

Method 3: Embed Code

For other video sources, use an embed code.

  1. Copy the embed code from the video source
  2. Add an HTML block in Sitebuilder
  3. Paste the embed code
  4. Adjust the dimensions if necessary

Video Settings

Autoplay

Let the video play automatically when the page loads.

  1. Select the video block
  2. Go to Settings
  3. Enable Autoplay
  4. Also enable Muted (required for autoplay in browsers)

Loop

Let the video repeat automatically:

  1. Open the video settings
  2. Enable Loop
  3. The video plays continuously

Controls

Determine which buttons are visible:

  • Play/pause button
  • Volume control
  • Progress bar
  • Fullscreen button
  • Picture-in-picture

Poster Image

Show an image before the video starts:

  1. Go to video settings
  2. Upload a Poster Image
  3. Choose an attractive image from the video
  4. This improves your page's load time

Adding Audio

Upload Audio File

Add music, podcasts, or spoken content.

  1. Add an Audio element
  2. Upload your audio file:
    • MP3 (recommended)
    • WAV
    • OGG
  3. Configure the player

Embedding Spotify

Share Spotify playlists or podcasts:

  1. Copy the Spotify embed code
  2. Add an HTML block
  3. Paste the code
  4. Adjust the height for a nice display

Podcast Player

Do you have a podcast? Display episodes on your website:

  1. Use your podcast's RSS feed
  2. Add a podcast widget
  3. New episodes appear automatically

Background Video

Make an impression with a video as the background of a section.

Setting Background Video

  1. Select the section
  2. Go to Background
  3. Choose Video as the background type
  4. Upload or link your video

Best Practices for Background Video

  • Use short loops (10-30 seconds)
  • Choose subtle images without distractions
  • Ensure sufficient contrast with text
  • Add a fallback image for mobile
  • Keep the file size small

Adding Overlay

Make text more readable over video:

  1. Go to section settings
  2. Enable Overlay
  3. Choose a color and transparency
  4. Test the readability of your content

Show multiple videos organized.

Grid Layout

  1. Create a section with multiple columns
  2. Place a video block in each column
  3. Optionally add a title for each video

Video Slider

  1. Add a Slider element
  2. Add video blocks to each slide
  3. Configure navigation and timing

Let videos open in an overlay:

  1. Add a thumbnail image
  2. Link the image to the video
  3. Set to open in a lightbox
  4. Visitors click and the video opens large

Performance Optimization

Video can slow down your website. Follow these tips for optimal performance.

Lazy Loading

Load videos only when they come into view:

  1. Go to video settings
  2. Enable Lazy load
  3. This improves the initial load time

Video Compression

Reduce video files for faster loading:

  • Use 720p instead of 1080p where possible
  • Compress with tools like Handbrake
  • Choose an efficient codec (H.264)

Hosting Considerations

  • YouTube/Vimeo: Free, fast delivery
  • Own uploads: More control, uses your bandwidth
  • CDN: For many visitors with own video

Mobile Considerations

Responsive Videos

Sitebuilder automatically adjusts videos to screen size. Check:

  1. Test on different devices
  2. Check if buttons are large enough
  3. Consider shorter videos for mobile

Data Usage

Mobile users often have limited data. Consider:

  • No autoplay on mobile
  • Let users choose to watch
  • Show an attractive thumbnail

Accessibility

Make multimedia accessible to everyone.

Subtitles

Add subtitles to your videos:

  1. Create an SRT or VTT file
  2. Upload this in your video settings
  3. Subtitles appear automatically

Transcripts

Offer a text version:

  1. Write a transcript of the audio
  2. Place this under the video
  3. Good for SEO and accessibility

Need Help?

We are here for you! Are you facing any issues or do you have questions? Our support team is happy to assist you personally. Send us a message via the ticket system - we usually respond within a few hours and are happy to help.