Videos - adding videos to a screen

What is the correct method to add videos to a screen.

I need to add 36 practice videos to my app. The users should be able to control the video.

What is the best way? Plyr video or host the video and embed or …

Please help. Adalo support keeps telling me to get one of their experts, but there must be some simple instructions to follow to get this set up.

Any advise would be greatly appreciated.


@jools, are you just adding to the database or everyone adding through the app?

Videos are very easy to add. If you are adding them yourself, perhaps put them on YouTube and use the YouTube player, input video URL where it asks. If users are uploading videos use playr or YouTube URL. Use a text input where users input YouTube URL and make text that to the player’s video source. Alternatively, use a file picker for users to upload a video. Remember to add either video url (text) or video file to the database with a relationship to what the video is posted as (a post, for instance). I have both capabilities for users on my app, they can upload from device or YouTube url, and both work great. As well on my landing page I have a video that auto plays when someone visits the page. If there’s any confusion let me know and I’ll try to be more straightforward.

I am adding the videos to the database. This app is a practice for students to click on a video to practice. So, I will be uploading a set number of videos. They will click from a list to select which video they want and then it plays for them.

Then the plyr component would be great here! It should be mp4. If it’s not mp4 needs to host in another place and embed or use the @gskachkov’s video component which supports videos rather than mp4.

Thanks Dilon, So the videos are all mp4s. So, are you saying that I don’t need a video host to use plyr component? I just create a database with all the videos? How does that work? Do I just upload the video right into a data base? If so, then what is next. How to I pull the video from the data base onto the app screen designated for said video. I’m happy to read an article with instructions if you can direct me there. So far, i’ve seen different ways to do this. One was data base without plyr component. Another was video host embed urls with database…So, I just need clear instructions on how to achieve letting users choose from a menu, click a button, that will bring them to a screen with the video they want on it.

I’m currently using an unlisted YouTube video to host the video as I’m learning how to do this, but if hosting the videos are necessary, I’m looking at either AWS or Google Cloud.

How to use filepicker? can you explain step by step?

Yeah so a collection of videos with a file property and upload the videos through the collection or from the app or both. Then add a list to show the menu and inside the list add a button that links to a new screen and in that screen add a video component and add file property> URL from magic text. Since the plyr component doesn’t exist anymore in the marketplace you would have to use this one in the marketplace :


or this one that @gskachkov created which I’m using! :

Let me know!

Welcome to the community @Nurken! :partying_face:

You can just create a file property in a collection and when you add a form and connect that collection, the file property becomes a file picker in the form automatically. If it’s a custom form you have to add a file picker :

and add a button with a create action and for the file property in the action, add the file picker’s input.

No, I know how to add file picker I just want to add upload and view action, how to do it?

So you mean the file got uploaded and saving in the collection but don’t know how to view? You have to use the WebView component.

in realization, I need to upload a video and play in vertical video player

So you purchased the vertical video player right? There should be a section to add the video url, so you have to add file property > url from magic text. For get the data, you need to make the component a list or before coming to the video screen, you need to add a list on that previous screen that pass the video data to the video screen to add the video url from magic text.

Hi, I see different ways, so I am getting confused. I saw a video that explains how to do it with plyr video and AWS (video host). This is a different method to the one using the database method with webview and lists. Which way is better/easier. Less hassle to use. It is for a user to select from a menu or list of buttons. The button action will lead to the video screen. I just need 1 method using a video host such as Google cloud. Thanks.

Using a collection in the database is easier because it’s easier to update when needed and easy to build. So create a collection > upload the videos > add a video component > make it a list > connect it to that created collection and in the video component add the video URL from magic text.

Then you can keep the same videos collection and add a text property and add a list on the screen that is before the video screen and connect the videos collection and display that text property and link the list to the video screen and in there add the video URL with magic text. Since the plyr component is not there and didn’t purchased the new video component, couldn’t show this via a video. Let me know the issues with some screenshots of your setup and I’ll help!