Skip to main content

Frequently Asked Questions

Common questions and solutions for using Zvid.

Project Configuration​

Q: Video dimensions and aspect ratios​

Q: What video dimensions should I use?

A: Use resolution presets for common formats, or specify custom dimensions:

Using Resolution Presets (Recommended):

// Social media formats
const project = {
  resolution: "instagram-post", // 1080×1080 (Square)
  // resolution: "youtube-short", // 1080×1920 (Vertical)
  // resolution: "tiktok", // 1080×1920 (Vertical)
  // resolution: "full-hd", // 1920×1080 (Landscape)
};

Manual Dimensions:

// Custom dimensions
const project = {
  resolution: "custom", // or omit resolution property
  width: 1920,
  height: 1080,
};

Popular Resolution Presets:

  • full-hd - 1920×1080 (16:9) - Most common
  • hd - 1280×720 (16:9) - Good for smaller files
  • squared - 1080×1080 (1:1) - Square format
  • youtube-short - 1080×1920 (9:16) - YouTube Shorts
  • tiktok - 1080×1920 (9:16) - TikTok videos
  • instagram-post - 1080×1080 (1:1) - Instagram posts
  • instagram-story - 1080×1920 (9:16) - Instagram Stories

Q: Resolution presets vs custom dimensions​

Q: When should I use resolution presets vs custom dimensions?

A: Use resolution presets for:

  • Social media content - Optimized for platform requirements
  • Standard formats - HD, Full HD, etc.
  • Quick setup - No need to remember exact dimensions
  • Consistency - Ensures correct aspect ratios

Use custom dimensions for:

  • Unique requirements - Non-standard sizes
  • Specific client needs - Custom aspect ratios
  • Legacy formats - Older or specialized dimensions
// Platform-optimized (recommended)
const socialVideo = {
  resolution: "instagram-reel", // Perfect for Instagram
  duration: 30,
  visuals: [
    /* ... */
  ],
};

// Custom requirements
const customVideo = {
  resolution: "custom",
  width: 1600, // Custom width
  height: 900, // Custom height (16:9 ratio)
  duration: 30,
  visuals: [
    /* ... */
  ],
};

Q: Frame rate selection​

Q: What frame rate should I use?

A: Frame rate guidelines:

  • 30 fps - Standard for most content
  • 60 fps - Smooth motion, gaming content
  • 24 fps - Cinematic look
  • 25 fps - PAL standard (Europe)

Higher frame rates create larger files and consume more time for processing but provide smoother motion.

Q: Output format options​

Q: Which output format should I choose?

A: Format recommendations:

  • MP4 - Best compatibility, recommended for most uses
  • WebM - Good for web, smaller file sizes
  • AVI - Older format, larger files
  • MOV - Good quality, Apple ecosystem
const project = {
  outputFormat: "mp4", // Recommended
  // outputFormat: "webm", // For web
  // outputFormat: "mov", // For Apple
};

Element Positioning​

Q: Centering elements​

Q: How do I center elements in my video?

Center both horizontally and vertically
Use the position: "center-center" option to automatically center an element in the middle of the video:

{
  position: "center-center",
  width: 400,
  height: 100,
  // Element will be centered horizontally & vertically
}

Q: Element sizing​

Q: How do I size elements properly?

A: Sizing works like this:

  • You can either:

    • Set width and height manually for explicit dimensions
    • Or use resize to calculate dimensions automatically based on the configured target width and height

  • Supported resize modes:

    • "contain": Scales the element so the entire content fits within the target bounds while preserving aspect ratio. This may leave empty space on one axis.
    • "cover": Scales the element so the target bounds are fully filled while preserving aspect ratio. This may require cropping on one axis.

  • Important:

    • Based on this logic alone, resize does not inherently override manually provided width and height. It simply returns calculated dimensions from the target config and the original aspect ratio.
    • If the original dimensions or target config dimensions are missing, the function falls back to the configured target width and height.
// Option 1: Manual sizing
{
  width: 800,
  height: 100,
}

// Option 2: Automatic sizing using resize
{
  resize: "contain" // or "cover"
}

Timing and Animation​

Q: Animation timing​

Q: How do timing properties work?

A: Four timing properties control element lifecycle:

{
  enterBegin: 2,   // Starts appearing at 2 seconds
  enterEnd: 3,     // Fully visible at 3 seconds
  exitBegin: 7,    // Starts disappearing at 7 seconds
  exitEnd: 8,      // Completely gone at 8 seconds
}

// Element is:
// - Invisible: 0-2 seconds
// - Appearing: 2-3 seconds (1 second transition)
// - Visible: 3-7 seconds (4 seconds visible)
// - Disappearing: 7-8 seconds (1 second transition)
// - Invisible: 8+ seconds

Q: Smooth animations​

Q: How do I create smooth animations between elements?

A: Overlap timing for smooth animations:

// First element
{
  enterBegin: 0, enterEnd: 1,
  exitBegin: 4, exitEnd: 5,
  enterAnimation: "fade",
  exitAnimation: "fade"
}

// Second element (overlaps with first)
{
  enterBegin: 3, enterEnd: 4,
  exitBegin: 7, exitEnd: 8,
  enterAnimation: "slideup",
  exitAnimation: "slidedown"
}

Q: Animation effects not working​

Q: My animations aren't showing up

A: Check these common issues:

  1. Animation names are case-sensitive
  2. Ensure timing allows for animation duration
  3. Verify element is on correct track
  4. Ensuring the timing coordinations
// Correct animation names
enterAnimation: "fade",     // ✓ Correct
enterAnimation: "FadeIn",     // ✗ Wrong case
enterAnimation: "fade-in",    // ✗ Wrong format

// Ensure timing allows animation
enterBegin: 0,
enterEnd: 1,    // 1 second for animation - good
// enterEnd: 0.1,  // 0.1 second - too fast to see

Media Files​

Q: Supported file formats​

Q: What media formats are supported?

A: Supported formats: All FFMPEG supported formats are accepted as input.

For example:

Images:

  • JPEG (.jpg, .jpeg)
  • PNG (.png)
  • WebP (.webp)
  • GIF (.gif) - static only for IMAGE type
  • SVG (.svg) - for SVG type

Videos:

  • MP4 (.mp4) - Recommended
  • AVI (.avi)
  • MOV (.mov)
  • WebM (.webm)
  • MKV (.mkv)

Audio:

  • MP3 (.mp3) - Recommended
  • WAV (.wav)
  • AAC (.aac)
  • OGG (.ogg)

As output video for now these are the supported formats:

  • MP4 (.mp4) - Recommended and Default
  • AVI (.avi)
  • MOV (.mov)
  • WebM (.webm)

Text and Fonts​

Q: Font not displaying​

Q: My custom font isn't showing

A: Font troubleshooting:

  1. For now, only google fonts working.
  2. Use exact font family name are provided from google fonts
style: {
  fontFamily: "Poppins",              // ✓ Google font
}

Q: Getting help​

Q: Where can I get more help?

A: Support resources:

  1. Check this FAQ first
  2. Contact us at help@zvid.io