Skip to main content

Video Element

The Video element embeds YouTube or Vimeo videos in your popup. Perfect for tutorials, product demos, and promotional content.

Overview​

PropertyValue
Element Typevideo
Can Contain ChildrenNo
Supported PlatformsYouTube, Vimeo

Use Cases​

  • Product demo videos
  • Tutorial content
  • Promotional videos
  • Testimonial videos
  • Welcome messages
  • Course previews

Content Settings​

Video URL​

Paste the video URL:

YouTube formats:

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

Vimeo formats:

https://vimeo.com/VIDEO_ID

Autoplay​

Automatically play video when popup opens:

OptionDescription
EnabledVideo plays automatically
DisabledUser must click to play
Browser Restrictions

Most browsers require videos to be muted for autoplay to work. Enable "Muted" for reliable autoplay.

Muted​

Start video without sound:

OptionDescription
EnabledVideo starts muted
DisabledVideo plays with sound

Loop​

Repeat video continuously:

OptionDescription
EnabledVideo loops
DisabledVideo plays once

Controls​

Show video player controls:

OptionDescription
EnabledShow play/pause, volume, etc.
DisabledHide controls (for autoplay loops)

YouTube-Specific Settings​

Start Time​

Begin playback at specific time:

Start: 30 (seconds)

Show related videos at end:

OptionDescription
ShowDisplay YouTube's related videos
HideDon't show related videos

Modest Branding​

Reduce YouTube branding:

OptionDescription
EnabledMinimal YouTube logo
DisabledStandard branding

Privacy Mode​

Use privacy-enhanced mode:

Enabled: Uses youtube-nocookie.com

Vimeo-Specific Settings​

Color​

Customize player accent color:

Color: #4F46E5

Title​

Show/hide video title.

Byline​

Show/hide creator name.

Portrait​

Show/hide creator avatar.

Size Settings​

Width​

Video width:

OptionDescription
AutoNatural aspect ratio
Full100% container width
FixedSpecific pixel value

Height​

Video height (or use aspect ratio).

Aspect Ratio​

Common video ratios:

RatioDescription
16:9Widescreen (most common)
4:3Traditional
1:1Square
9:16Vertical/mobile

Style Settings​

Border Radius​

Round video corners:

Border Radius: 12px

Shadow​

Add depth:

Shadow: 0 4px 20px rgba(0,0,0,0.15)

Border​

Add border around video:

Border: 1px solid #e2e8f0

Layout Settings​

Alignment​

Position video horizontally:

OptionDescription
LeftAlign to left
CenterCenter horizontally
RightAlign to right

Margin​

Space around the video.

Thumbnail Settings​

Custom Thumbnail​

Override default video thumbnail:

  • Upload custom image
  • Use URL

Play Button Overlay​

Customize play button appearance.

Advanced Settings​

HTML ID​

Custom ID for targeting.

CSS Classes​

Add custom classes.

Lazy Load​

Load video only when visible:

OptionDescription
EnabledBetter performance
DisabledLoad immediately

Examples​

Product Demo​

URL: https://www.youtube.com/watch?v=demo123

Settings:

  • Autoplay: Disabled
  • Controls: Enabled
  • Related Videos: Hidden
  • Width: 100%
  • Aspect Ratio: 16:9
  • Border Radius: 12px

Background Video Loop​

URL: https://www.youtube.com/watch?v=ambient123

Settings:

  • Autoplay: Enabled
  • Muted: Enabled
  • Loop: Enabled
  • Controls: Disabled
  • Width: 100%

Tutorial Video​

URL: https://vimeo.com/tutorial456

Settings:

  • Autoplay: Disabled
  • Controls: Enabled
  • Color: #4F46E5
  • Width: 100%
  • Max Width: 600px
  • Alignment: Center

Testimonial Video​

URL: https://www.youtube.com/watch?v=review789

Settings:

  • Autoplay: Disabled
  • Controls: Enabled
  • Related: Hidden
  • Border Radius: 8px
  • Shadow: 0 4px 12px rgba(0,0,0,0.1)

Best Practices​

  1. Don't autoplay with sound — Browsers block it and users dislike it
  2. Provide controls — Let users control playback
  3. Optimize for mobile — Use responsive sizing
  4. Consider load time — Videos add page weight
  5. Hide related videos — Keep users focused
  6. Use thumbnails — Custom thumbnails increase clicks

Accessibility​

  • Provide captions/subtitles in the video
  • Don't rely solely on video for critical information
  • Allow users to control playback
  • Image — For static visual content
  • Iframe — For other embed types
  • Button — CTAs alongside video