Play video

Bravo allows you to add videos to your apps in various ways. You can add videos from YouTube in the apps, or videos stored on the internet with an URL ending in .mp4.

Check out the different options to add videos in the example file below.

📹 Embedded audioless video

The [component:video] tag is used to add an audioless video embedded on the app screen. The video needs to come in an URL ending in .mp4 for the component to work. See here how to set it up.

YouTube videos are currently not supported for this component. You can upload your video to an online service that generates an .mp4 URL, such as AWS S3 or any from this list.

📹 Web view for YouTube videos (Recommended option)

Another possibility to include videos on the apps is to display them with a web view component, using the [component:web-view] tag followed by the video URL. With this method, you can use the embed URL from YouTube videos and add it as a web view.

With the web view component, you can play the video both inline and in the video player (by clicking on the full screen icon), it will also display a thumbnail of the video. The experience will be less "native" than the open video component (see below), as the controls, logo and some other components specific for YouTube will be displayed.

You can also specify some options in the YouTube embed URL, for instance, to set autoplay for the video (see URL in the sample Figma file).

📹 Open video in the browser or YouTube app

Using the open URL action (action:openurl tag) on Android, the video will open in the browser or the YouTube app in case the video is from YouTube and the app is installed on the mobile device. The user will be taken out from the app to watch the video.

On iOS, this tag will open the native video player (see "Open video" action below).

📹 "Open video" action

The last option to use videos in the apps is the action:openvideo tag. This allows you to open a video by clicking a UI element. The video will open in a full-screen video player, offering a more native feel than the web view component. This tag supports both YouTube videos and other videos uploaded to the Internet with a URL ending in .mp4.

The advantage to using this tag is the possibility to open a YouTube video from any UI element, in contrast to the web view component, where the video needs to be added as a web view in the app, and the "full screen" icon needs to be clicked to open the video in the player.

If you're using Dropbox, you will need to force the link to download or to render. You can do it by:

• Replacing www to dland using dl=1 as a query parameter in your URL. i.e:

• Adding raw=1to your URL. i.e: https://www.dropbox.com/s/a1b2c3d4ef5gh6/example.mp4?raw=1

Find more information here.

💾 Example files

Duplicate the files below to see how to set it up!

Not found