Last updated: March 2026 Category: Designing Your App
Overview
The Video component lets you embed YouTube or Vimeo videos directly on your app's home screen. Videos are a powerful way to showcase products in action, share brand stories, highlight tutorials, or feature promotional content that captures attention.
How to Use
Adding a Video Component
Drag the Video component from the Component Palette into the Phone Preview.
Click on it to open the Inspector Panel.
[Screenshot: Video component added to the Phone Preview with a placeholder]
Setting the Video URL
In the Content tab:
Paste the full URL of your YouTube or Vimeo video into the Video URL field.
The Phone Preview loads a thumbnail of the video.
Supported URL formats:
Vimeo —
https://vimeo.com/VIDEO_ID
[Screenshot: Content tab with a YouTube URL entered and the video thumbnail visible in the preview]
Autoplay Settings
In the Settings tab, configure playback behavior:
Autoplay — Toggle on to have the video start playing automatically when it scrolls into view. Toggle off to require the customer to tap play.
Muted — When autoplay is enabled, the video plays muted by default (this is required by most mobile platforms). Customers can unmute by tapping the volume control.
Loop — Toggle on to restart the video automatically when it finishes.
Layout Options
Aspect ratio — Choose 16:9 (standard widescreen) or 4:3. The 16:9 ratio is recommended for most content.
Padding — Add spacing around the video player.
Margin — Add outer spacing to separate the video from surrounding components.
Border radius — Round the corners of the video container.
Tips
Use video to demonstrate products in use — seeing a product in motion builds confidence and drives conversions.
Keep embedded videos short. For home screen placement, 30–90 seconds is ideal. Longer content works better on dedicated product or landing pages.
If you enable autoplay, always keep the video muted. Unexpected audio is one of the most common reasons customers leave an app.
Use a high-quality thumbnail. YouTube and Vimeo generate thumbnails automatically, but you can set a custom one on those platforms for a more polished look.
Place the Video component between text or product sections to break up the visual rhythm and keep customers engaged.
Make sure the video is set to public or unlisted on YouTube/Vimeo. Private videos will not load in the app.
Related Articles