← Back to Documentation

Embedding Videos

Videos bring your pages to life. This guide covers embedding videos from popular platforms and uploading your own video content.

Adding a Video Block

Create Video Block

  1. Press V or open the block palette
  2. Select Video
  3. Click to place on your canvas
  4. The video configuration panel opens

Video Sources

YouTube

Embed any public YouTube video:

  1. Select YouTube as the source
  2. Paste the video URL
  3. Click Add Video

Supported URL formats:

https://www.youtube.com/watch?v=VIDEO_ID
https://youtu.be/VIDEO_ID
https://youtube.com/embed/VIDEO_ID

Vimeo

Embed Vimeo videos:

  1. Select Vimeo as the source
  2. Paste the video URL
  3. Click Add Video

Supported URL formats:

https://vimeo.com/VIDEO_ID
https://player.vimeo.com/video/VIDEO_ID

Direct Upload

Upload your own videos:

  1. Select Upload as the source
  2. Drag and drop your video file
  3. Or click to browse files

Supported formats:

  • MP4 (recommended)
  • WebM
  • MOV

File size: Up to 500MB (varies by plan)

Video Settings

Playback Controls

| Setting | Description | |---------|-------------| | Autoplay | Start playing when visible | | Loop | Restart when finished | | Muted | Play without sound initially | | Controls | Show play/pause/volume | | Playsinline | Play in place on mobile |

Autoplay Notes

Most browsers require videos to be muted for autoplay:

  • Enable Muted if using Autoplay
  • Users can unmute manually
  • Required for mobile autoplay

Start and End Times

For YouTube/Vimeo:

  1. Set Start time in seconds
  2. Optionally set End time
  3. Video plays specified portion

Example: Start at 30, End at 90 plays seconds 30-90.

Display Options

Aspect Ratio

Choose video proportions:

| Ratio | Use Case | |-------|----------| | 16:9 | Standard widescreen | | 4:3 | Classic video | | 1:1 | Square (social media) | | 9:16 | Vertical video | | 21:9 | Ultrawide/cinematic | | Custom | Enter your own ratio |

Cover Image

Set a custom thumbnail:

  1. Enable Custom Thumbnail
  2. Upload an image
  3. This shows before video plays

Benefits:

  • Control first impression
  • Faster initial load
  • Branded appearance

Sizing

Control video dimensions:

  • Width - Percentage or pixels
  • Height - Auto (by ratio) or fixed
  • Max width - Limit on large screens

Platform-Specific Options

YouTube Options

| Option | Description | |--------|-------------| | Show related | Related videos at end | | Show info | Title and uploader | | Privacy mode | Enhanced privacy embed | | Annotations | Show video annotations |

Vimeo Options

| Option | Description | |--------|-------------| | Color | Player accent color | | Portrait | Show creator portrait | | Title | Show video title | | Byline | Show creator name |

Uploaded Video Options

| Option | Description | |--------|-------------| | Preload | None, metadata, or auto | | Poster | Thumbnail frame | | Quality | Optimization level |

Background Videos

Create video backgrounds:

Setup

  1. Add a video block
  2. Enable Background Mode
  3. Stretch to fill container
  4. Set z-index behind content

Recommended Settings

Autoplay: Yes
Loop: Yes
Muted: Yes (required)
Controls: Hidden

Overlay Content

Add content over background video:

  1. Add text or image blocks
  2. Position over video
  3. Set higher z-index

Responsive Video

Automatic Sizing

Videos automatically resize:

  • Maintain aspect ratio
  • Fill container width
  • Adjust for mobile

Mobile Considerations

On mobile devices:

  • Autoplay may be restricted
  • Consider smaller file sizes
  • Test on actual devices

Video Performance

Optimization Tips

  1. Use streaming services - YouTube/Vimeo handle delivery
  2. Optimize uploads - Compress before uploading
  3. Limit autoplay videos - Affects page load
  4. Use lazy loading - Videos load when needed

Recommended Formats

For uploaded videos:

| Setting | Recommended | |---------|-------------| | Format | MP4 (H.264) | | Resolution | 1080p max | | Bitrate | 8-12 Mbps | | Audio | AAC 128kbps |

Accessibility

Make Videos Accessible

  1. Add captions

    • Use YouTube/Vimeo caption features
    • Or add caption files to uploads

  2. Provide transcripts

    • Add text below video
    • Link to full transcript

  3. Describe content

    • Alt text for video block
    • Context in surrounding text

Common Use Cases

Hero Video

Full-width video at page top:

  • Muted autoplay
  • Looping
  • No controls
  • Overlay text

Tutorial/Demo

Instructional video:

  • Full controls
  • Standard sizing
  • Chapters (YouTube)
  • Clear thumbnail

Portfolio Piece

Showcase video work:

  • Custom thumbnail
  • Vimeo for quality
  • Lightbox viewing
  • Title/description

Troubleshooting

Video not playing

  1. Check URL is correct
  2. Verify video is public
  3. Try different browser
  4. Check embed permissions

Autoplay not working

  1. Ensure video is muted
  2. Check browser settings
  3. May require user interaction
  4. Expected on mobile

Video too slow

  1. Check internet connection
  2. Try lower quality setting
  3. Consider shorter clips
  4. Use streaming services

Next Steps

Embedding Videos - Salon Docs