YouTube

Add a YouTube video player so your users can view YouTube videos directly in your app.

Skill Level: Beginner

Before You Begin

• Know about Screens and Components

• Have YouTube open in a separate browser tab or have a Collection of Videos

• You do not need a paid Adalo plan to use this feature

Walkthrough

Simple

1.) While in your Adalo app, click on the big plus sign in the top left corner, enter "Marketplace" in the search bar, then click Explore Marketplace

2.) Find YouTube in the list and click Install, then click Done

3.) Back in the components list, enter YouTube in the search bar, then click and drag the component onto the desired screen

4.) Click on the newly added YouTube component if not already selected. In order for the component to function, you will need a YouTube link. For this you can either paste in a static (unchanging) link or you can use Magic Text to display dynamic (changing) video links from a Collection in your database. In this walkthrough, let's just paste in a link into the Video URL input field of the YouTube component settings.

5.) You also have the option of making the video auto-play when the user visits the screen as well as placing a Click Action on the play button. This is useful for tracking user engagement and watch history.

You'll need to allow embedding by third-party apps/sites otherwise your users will see the dreaded "Video unavailable" message within the embedded player. To allow embedding, go to the Content tab inside YouTube Studio, click on the video thumbnail, and on the Video Details page scroll down until you find the Allow embeddingoption. Make sure the checkbox is enabled and save your changes.

In-Depth

1.) While in your Adalo app, click on the big plus sign in the top left corner, enter "Marketplace" in the search bar, then click Explore Marketplace

Start adding the YouTube component by visiting the Marketplace

2.) Find YouTube in the list and click Install, then click Done

3.) Back in the components list, enter YouTube in the search bar, then click and drag the component onto the desired screen

4.) Click on the newly added YouTube component if not already selected. In order for the component to function, you will need a YouTube link. For this you can either paste in a static (unchanging) link or you can use Magic Text to display dynamic (changing) video links from a Collection in your database. In this walkthrough, let's just paste in a link into the Video URL input field of the YouTube component settings.

Pasting a static link into the YouTube component.

5.) You also have the option of making the video auto-play when the user visits the screen as well as placing a Click Action on the play button. This is useful for tracking user engagement and watch history.

Locations of the autoplay and click action features

Example

With the YouTube component you can let your users view public or unlisted YouTube videos right in your app using static text or Magic Text from your database! To see an example of this component in action, you can view or clone the example used in this walkthrough by clicking here.

Learn More

• You can also use the YouTube component within a Custom List to create playlists of videos. Just make sure you have a collection with a text property containing the video URLs. Check out this example app to see this in action.

• You can paste in any kind of public or unlisted YouTube URL. Private links are not supported at this time.

• Parameters on the end of the link such as start times are also not currently supported.

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!

Do you have a tutorial or help doc request? Let us know!