Chapter 6: Video Elements

Video elements bring motion and dynamic content to your templates. This chapter covers adding, configuring, and optimizing video clips in FX Express.

Adding Videos

To add a video element:

1. Click Video in the element palette (or drag it to the canvas)
2. A video picker dialog opens
3. Select or upload your video file
4. The video appears on the canvas

Video Sources

Upload from Computer

1. Click “Upload” in the video picker
2. Select a video file from your device
3. Supported formats: MP4, WebM, MOV

From URL

1. Paste a video URL directly
2. The video loads from the remote source
3. Ensure the URL is publicly accessible and allows embedding

Stock Videos

Browse integrated stock video libraries (when available).

Video Properties

Source (src)

The URL or path to the video file.

Object Fit

Controls how the video fills its container (same as images):

Mode	Behavior
Cover	Fills area, crops if necessary (default)
Contain	Fits entire video, may show background
Fill	Stretches to fill exactly

Muted

When enabled, the video plays without audio:

• Useful for background videos
• Required for autoplay in some browsers
• Toggle using the volume icon in toolbar

Loop

When enabled, the video repeats continuously:

• Great for background loops
• Video restarts when it reaches the end
• Toggle using the repeat icon in toolbar

Autoplay

When enabled, video plays automatically:

• Starts when the element’s In Time is reached
• Muted autoplay is more reliable across browsers

Video Timing

Video elements have special timing properties that control playback synchronization.

In Time and Duration

Like all elements, videos have:

• In Time: When the video element appears in the scene
• Duration: How long the video element is visible

Start Time and End Time (Trim)

Trim which portion of the source video to use:

• Start Time: Where to begin in the source video (seconds)
• End Time: Where to stop in the source video (seconds)

Example: A 60-second source video trimmed to show only 10-30 seconds.

Content Offset

Controls when video content actually starts playing relative to the element’s In Time:

• contentOffset = 0: Video plays immediately when element appears
• contentOffset > 0: Video waits N seconds before starting

Example: Element appears at 2s, contentOffset is 1s → video content starts at 3s.

Frame Freeze

If the video ends before the element duration expires:

• The last frame is frozen
• The element remains visible with the final frame
• Useful for reveal effects

The Video Toolbar

When you select a video, a floating toolbar appears:

Button	Function
Replace video	Choose a different video
Cover (📐)	Set object-fit to cover
Contain (📦)	Set object-fit to contain
Fill (⬜)	Set object-fit to fill
Mute/Unmute (🔊/🔇)	Toggle audio
Loop (🔁)	Toggle looping
Autoplay (▶)	Toggle autoplay
Timing (🕐)	Open timing dialog
Delete (🗑)	Remove the video
Lock (🔒)	Lock position and size

Video Playback Modes

Background Video

For full-screen video backgrounds:

1. Position: 0%, 0%
2. Size: 100%, 100%
3. Object Fit: Cover
4. Muted: Yes (recommended)
5. Loop: Yes (for continuous play)
6. Z-Index: Lowest value

Synchronized Video

For video synced with scene timing:

1. Set element In Time to desired start
2. Enable Autoplay
3. Match element Duration to video length
4. Or use “Match video length” scene duration mode

Video with Audio

For videos where audio matters:

1. Muted: No
2. Consider scene duration “Match video length”
3. Test audio levels in preview
4. Balance with any scene sounds or voiceover

Scene Duration Modes

Video elements interact with scene duration settings:

Match Video Length

Scene duration automatically matches the video element:

• Scene plays as long as the video
• Useful for video-centric scenes
• Set in Scene Settings → Duration tab

Fixed Duration

When scene has fixed duration:

• Video may be cut short if scene ends first
• Or freeze on last frame if video ends first
• Plan video length accordingly

Video Performance

Optimization Tips

Factor	Recommendation
Resolution	Match output resolution (1080p typical)
Bitrate	5-10 Mbps for quality, lower for file size
Codec	H.264 for compatibility, H.265 for efficiency
Frame rate	30fps standard, 60fps for smooth motion

File Size Considerations

• Large videos increase load times
• Compress videos appropriately
• Consider shorter clips when possible
• Use external hosting for large files

Browser Compatibility

• MP4 (H.264) has best compatibility
• WebM is efficient but less supported
• Test across target browsers

Video with Scene Sounds

Combine video with scene audio:

Muted Video + Scene Sound

1. Mute the video element
2. Add sounds via Scene Sounds (🔊)
3. Audio plays from scene, video from element
4. Useful when replacing video audio

Video Audio + Scene Sound

Both play simultaneously:

• Adjust video volume vs scene sound levels
• Consider which should be prominent
• Test for audio conflicts

Common Video Use Cases

Product Demo

Object Fit: Contain
Muted: No (or with voiceover)
Loop: No
Autoplay: Yes

Ambient Background

Object Fit: Cover
Muted: Yes
Loop: Yes
Autoplay: Yes
Z-Index: 0 (back)

Testimonial Clip

Object Fit: Contain or Cover
Muted: No
Loop: No
Duration: Match video length

Animated Logo

Object Fit: Contain
Muted: Yes
Loop: No or Yes
Size: Small, positioned in corner

Troubleshooting

Video Won’t Play

• Check video format compatibility (use MP4)
• Verify URL is accessible
• Check browser console for errors
• Try re-uploading the video

Video Has No Sound

• Check Muted setting in toolbar
• Verify source video has audio
• Check preview player mute toggle
• Test in final export

Video Looks Pixelated

• Source resolution may be too low
• Don’t scale up small videos significantly
• Use higher quality source file

Video Timing Is Off

• Check In Time and Duration settings
• Verify Content Offset value
• Check Start/End Time trim settings
• Use timeline for precise adjustment

Video Stutters in Preview

• Large files may struggle in preview
• Optimize video file size
• Final export typically performs better
• Close other browser tabs

Audio/Video Out of Sync

• May occur with variable frame rate sources
• Convert to constant frame rate
• Re-encode with proper settings

Advanced: Content Offset Examples

Delayed Start

Video element appears, but content waits:

Element In Time: 0s
Content Offset: 2s
Result: Element visible immediately, video plays at 2s

Synced with Animation

Text animates in, then video plays:

Text animation: 0-2s
Video In Time: 0s
Content Offset: 2s
Result: Text animates, video plays after

Staggered Videos

Multiple videos start at different times:

Video 1: In Time 0s, Offset 0s
Video 2: In Time 0s, Offset 1s
Video 3: In Time 0s, Offset 2s
Result: Videos appear together, play sequentially

---

← Previous: Image Elements | Next: Shape Elements →