Video Component
The Video Component allows you to add videos to your Adalo native and web applications. The following is a rundown of the properties and settings available to set up your video components.
Last updated
The Video Component allows you to add videos to your Adalo native and web applications. The following is a rundown of the properties and settings available to set up your video components.
Last updated
Skill Level: Intermediate
The Video Component is only available in Adalo 2.0 Responsive apps.
Know about and .
Know how to use
You do not need a paid Adalo plan to use this feature
The video component supports nearly all modern file types, but not all formats work across native Android, native iOS, and various web browsers. When possible, we strongly suggest using the .mp4 file type with H.264 compression.
This is where you connect the component to your source video. The video can be uploaded to your app’s database or hosted outside of Adalo. Let’s look at both scenarios.
For videos uploaded to your Adalo database (you can use the “File” property type in your database for videos), click on the Magic Text icon, then navigate to the Collection and Property where your videos have been uploaded. From there, make sure you select the file’s URL from the flyout. In the example below, each user has an intro video and I used the Magic Text flyouts to reach the video’s URL.
If you want to load a video that’s hosted outside of Adalo, you can paste in the URL here.
Please Note: We strongly suggest using the dedicated Youtube component for Youtube videos to ensure they play correctly in native apps.
By default, the video component will show a black screen until the user hits the play button, but you can use the thumbnail feature to add a custom image instead. Use Magic Text to grab an image URL from your database (just like with the Video URL property above) or paste in a URL pointing to where your image is hosted if it is outside of Adalo.
The placeholder image allows you to show an image to your users if no video is loaded. Imagine you have a list of all the video uploads from your database but some of the records are missing a video file, the placeholder image would show for those list items.
This setting has two options:
Show Full Video (Don’t Crop): No matter what size your video player is, the full video will always show. Black bars will be shown for any extra space (you can change the color of these bars in Edit Styles). This is the recommended setting for most videos.
Crop Video to Fill Space: No black bars will ever be shown. Your video player’s size will always be taken up fully by the video, but cropping may occur so critical portions of your video may not be seen by your users.
This toggles visible controls for playing, scrubbing, volume, full screen, etc.
Controls may very by device/browser and are currently not available on Native Android.
Auto Play: If enabled, the video will start playing as soon as it is loaded. If disabled, the video will only play when the user clicks or taps the play button.
Muted: If enabled, the video will be muted by default.
Loop: If enabled, the video will automatically start over after it ends
If you’re building an experience for your users to upload their own videos, you can use a Form Component or a standalone File Picker Component.
Set up your database to have a “Videos” Collection with a File property
Set up your Form or File Picker component to upload to that Collection
Create a Custom List Component with a Video Component inside of it.
Connect the Custom List to the Videos Collection
Connect the Video Component to the URL of the uploaded video. To do this, Click on the Magic Text icon, then navigate to the “Videos” Collection and File property where your videos have been uploaded. From there, make sure you select the file’s URL from the flyout.
Videos uploaded to Adalo must be less than 50MB. For larger videos, host them outside of Adalo and link to them inside the Video component.
To avoid unintended scaling or black bars shown on the sides of the component, change the Layout of the component to "Stays Fixed" and ensure that the Video component in the builder is the same ratio as your source video.
Looking for more features? Check out additional components available for purchase in the Adalo Component Marketplace!
If you need additional help with this article, you can always ask in our! Be sure to paste the link to this article in your post as well!
