Adding Videos to Your Website: A Complete Guide

Adding Videos to Your Website: A Complete Guide

By Michael Chen

December 20, 2024 at 07:42 PM

Here's a streamlined guide for adding videos to your website:

Types of Video Integration

  • Embed videos from YouTube, Vimeo, Animoto, or Wistia
  • Upload your own videos (up to 30 minutes for standard plans)
  • Use videos in blocks, pages, backgrounds, and galleries

Video Requirements

For uploaded videos:

  • Course/Video Pages: 5000MB, 3 hours max
  • Video Block: 500MB, 30 minutes max
  • Section Background: 500MB, 60 seconds max
  • Supported quality: 360p (1.5Mbps) to 1080p (3Mbps)

Embedding Third-Party Videos

YouTube and Vimeo:

  1. Use direct video URLs (youtube.com/watch or vimeo.com/...)
  2. For advanced features, use embed codes
  3. Supports live streaming, 360-degree videos, and private content

Other Services:

  • Use oEmbed-compatible platforms
  • Add via embed blocks or gallery blocks
  • Custom code options available for unsupported services

Uploading Your Own Videos

File Compatibility:

  1. Check video metadata for requirements
  2. Ensure proper codec support
  3. Verify file size limits
  4. Test playback before publishing

Video Placement Options

Version 7.1:

  • Video Pages
  • Video Blocks
  • Embed Blocks
  • Gallery Blocks
  • Section Backgrounds
  • Lock Screen Backgrounds

Version 7.0:

  • Video Blocks
  • Gallery Pages
  • Banner Areas
  • Project Pages
  • Cover Pages

Best Practices

  1. Optimize video size for quick loading
  2. Include thumbnail images
  3. Test playback across devices
  4. Consider bandwidth limitations
  5. Use appropriate aspect ratios

Troubleshooting Tips

  • Slow loading: Allow buffer time for HD content
  • Playback issues: Verify file compatibility
  • Display problems: Check aspect ratios and dimensions
  • Missing controls: Test in private browsing mode
  • Embed errors: Verify correct URLs or codes

For analytics, consult your video hosting platform as native analytics don't track video performance.

Related Articles

Previous Articles