Skip to content

Video Best Practices V2

Videos are essential tools for enhancing user engagement, promoting features, or delivering messages effectively. However, incorrect usage can slow down site performance or detract from user experience. This guide outlines best practices for video uploads, embeds, and compression, ensuring your content is optimized for modern web standards.

Coding Standards

1. Video Upload Guidelines

Videos for hero backgrounds or auto-play purposes should adhere to the following guidelines:

Keep videos short (10-15 seconds recommended).

Avoid audio in background videos.

Use compressed formats optimized for the web (e.g., MP4).

Ensure videos loop seamlessly.

Avoid text or important messages in the video.

Design videos for visual aesthetics only.

2. Embedding and Linking Videos

For videos with essential content or audio, follow these best practices:

Embed videos from reliable hosting platforms like YouTube or Vimeo.

Include a play button instead of auto-play for videos with audio.

Avoid embedding heavy files on hero sections to preserve performance.

Link to videos instead of embedding them if they are longer or non-essential.

3. Video Modules (Beaver Builder Only)

Use lightweight video modules or tools to load videos efficiently. Recommended options include:

Standard video modules with basic play options.

Devices modules to place videos within desktop, tablet, or phone frames for visual appeal.

Advanced video gallery modules (e.g., PowerPack, UAB) for interactive displays.

Hide video modules on mobile devices to optimize performance.

4. Video Compression

To compress videos for web usage, use tools like Handbrake:

Download and install Handbrake (free and open-source) from https://handbrake.fr.

handbrake1

Drag and drop the video into Handbrake's source selector.

handbrake2

Cut unnecessary sections to shorten the video duration.

Set output format to MP4 and optimize for 'Web' in the summary tab.

handbrake3

Adjust framerate to 30fps and reduce quality to 1200 kbps or less.

handbrake4

Remove audio tracks unless essential.

Save and export the compressed video.

5. Key Recommendations

To ensure optimal performance and user experience:

Always test video load times on desktop and mobile devices.

Provide fallback images for video placeholders on mobile views.

Use lazy loading for embedded videos.

Avoid excessive use of videos on critical landing pages.

Table of Contents
    Video Practices
    Scroll To Top