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.
Skill Level: Intermediate
Before You Begin
The Video Component is only available in Adalo 2.0 Responsive apps.
Know about Databases and Screens and Components.
Know how to use Magic Text
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
.mp4file type withH.264compression.
Video URL
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.
Thumbnail URL
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.
Placeholder Image
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.
Video Cropping
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.
Show Controls
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.
Other Settings
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
Allow Your Users to Upload Their Own Videos and Show Them in a List
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.
Learn More
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.
Help
If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!
Looking for more features? Check out additional components available for purchase in the Adalo Component Marketplace!
Last updated
