The Video Properties Panel allows you to add and configure video elements in your designs. Control video URLs, playback settings, and preview video behavior directly in the editor.
Adding Video Elements
- Use the Image tool (press
I) or drag-and-drop to add a video file - Azyrom supports common video formats: MP4, WebM, MOV
- Alternatively, paste a video URL in the Properties Panel
- Video appears as a frame on the canvas with playback controls
Video Properties
Video URL
The source of your video content:
- Enter a direct URL to a video file (e.g.,
https://example.com/video.mp4) - Supports publicly accessible URLs
- Common formats: MP4 (.mp4), WebM (.webm), MOV (.mov)
- Press Enter or click Load Video to apply changes
Load Video Button
Reload the video with current settings:
- Click to refresh the video from the URL
- Use after changing the video URL
- Helpful if the video failed to load initially
- Resets playback to the beginning
Playback Settings
Autoplay
- Description: Start playing automatically in prototype mode
- Default: Off
- Use when: Video should play immediately when the screen appears
- Note: Some browsers may block autoplay with sound; combine with Muted for reliable autoplay
Loop
- Description: Repeat video continuously when it ends
- Default: Off
- Use when: Creating background videos, ambient content, or repeating animations
- Behavior: Video restarts from beginning when it reaches the end
Muted
- Description: Start with audio disabled
- Default: Off
- Use when: Video is decorative or requires user interaction to enable sound
- Tip: Enable for autoplay videos to ensure they play in all browsers
- Control: Users can unmute in prototype mode if desired
Video Status and Controls
When a video is loaded, the panel shows real-time status and playback controls:
Status Display
- Playback Status: Playing (green) or Paused (gray) indicator
- Time Display: Current position / Total duration (e.g., "0:15 / 1:30")
- Duration: Total video length shown in header
Playback Controls
Control video playback directly from the panel:
- Skip to Start - Jump to beginning of video
- Play/Pause - Toggle video playback
- Skip to End - Jump to end of video
- Mute/Unmute - Toggle audio on/off
Video in Prototypes
Prototype Mode Behavior
When presenting your prototype:
- Videos respect Autoplay, Loop, and Muted settings
- Users can click to play/pause (unless custom interactions override)
- Scrubbing timeline may be available depending on browser
- Fullscreen available in most browsers
Video Interactions
You can add prototype interactions triggered by video events:
- When Video Ends - Trigger action when playback completes
- When Video Hits - Trigger action at specific timestamp
- See Prototyping Panel for details on video interactions
Supported Video Formats
| Format | Extension | Browser Support | Best For |
|---|---|---|---|
| MP4 (H.264) | .mp4 | Excellent (all modern browsers) | General use, maximum compatibility |
| WebM | .webm | Good (Chrome, Firefox, Edge) | Web-optimized, smaller file sizes |
| QuickTime | .mov | Limited (Safari, some browsers) | macOS/iOS projects |
Common Use Cases
Background Video
- Add video element to frame
- Resize to cover entire frame background
- Enable Autoplay, Loop, and Muted
- Send video layer to back (Cmd+Shift+[)
- Video plays continuously as background when prototype starts
Hero Video Section
- Create frame for landing page hero section
- Add video element, set URL
- Enable Autoplay and Muted (for reliable autoplay)
- Add overlay elements (text, buttons) above video
- Video auto-plays when user navigates to page
Product Demo Video
- Add video element showing product demo
- Disable Autoplay (user initiates)
- Enable Muted initially
- Add play button with interaction: On Click → Play Video
- Add unmute button with interaction: On Click → Toggle Video Mute
- User controls when to watch and hear video
Video with Auto-Advance
- Add video element to onboarding screen
- Enable Autoplay and Muted
- In Prototyping Panel, add interaction: When Video Ends → Navigate To next screen
- Video plays automatically, advances to next screen when done
Looping Ambient Video
- Add subtle animated background (clouds, particles, etc.)
- Enable Autoplay, Loop, and Muted
- Lower opacity to 40-60% for subtle effect
- Video continuously loops in background
Tips and Best Practices
- Autoplay + Muted - Always mute autoplaying videos for browser compatibility
- File Size - Optimize videos for web (compress, reduce resolution) for faster loading
- Format Choice - Use MP4 (H.264) for maximum compatibility
- Fallback Image - Consider adding a poster image for slow connections
- Accessibility - Provide captions for important video content
- Mobile Consideration - Test video performance on mobile devices
- Hosting - Use a CDN or reliable video host for production prototypes
- Loop Seamlessly - Ensure looping videos have smooth start/end transitions
- Aspect Ratio - Match video aspect ratio to frame to avoid black bars
- Bandwidth - Be mindful of video file sizes in prototypes shared with clients
Video Optimization Guidelines
Recommended Video Settings
| Use Case | Resolution | Bitrate | Target Size |
|---|---|---|---|
| Background Video | 1280×720 | 2-3 Mbps | < 5 MB for 15s |
| Hero Section | 1920×1080 | 4-5 Mbps | < 10 MB for 15s |
| Product Demo | 1920×1080 | 5-8 Mbps | < 50 MB for 60s |
| Full Screen Showcase | 3840×2160 (4K) | 15-25 Mbps | < 100 MB for 30s |
Troubleshooting
Video Not Loading
- Verify URL is publicly accessible (not behind login or firewall)
- Check that URL ends with video file extension (.mp4, .webm, .mov)
- Ensure CORS headers allow cross-origin access
- Try different video format (convert to MP4 if using other format)
- Click Load Video button to retry
Autoplay Not Working
- Enable Muted setting (browsers block unmuted autoplay)
- Check browser autoplay policies (some browsers require user interaction first)
- Test in different browsers (behavior varies)
- Consider adding manual play button as fallback
Video Quality Issues
- Use higher resolution source video
- Increase bitrate during export
- Check internet connection speed
- Use MP4 format for better quality-to-size ratio
Performance Issues
- Reduce video resolution (720p instead of 1080p)
- Compress video file (lower bitrate)
- Limit number of simultaneous videos on screen
- Use shorter video clips instead of long videos
Keyboard Shortcuts
- I - Activate Image/Video tool
- Space - Play/Pause video (when selected in prototype mode)
Related Topics
- Prototyping Panel - Adding video interactions and triggers
- Working with Images - Adding media to designs
- Properties Panel - Configuring element properties
- Exporting Assets - Exporting video frames