Autoplay Video - Bravo Studio Help Center

Bravo Studio Help Center

Search…

Bravo Studio Help Center

Get started with Bravo Studio 👏

Get Started

Navigating Bravo Studio

Bravo Vision previewer

Unlock power features to create interactive apps

Set up your design

What is bravorizing?

Structuring the design: the layer hierarchy

Bravo Tags: adding functionality to the UI elements

Sample design files

Bravo Tags

Bravo Tags Master List

Special containers

Form & input fields

Interactive component

Component states

Flexible text (Flexo)

Map with markers

Stateful component (like button)

App Icon & Splash Screen

Set up your backend

Browse by backend

Set up API requests

Debugging API issues

Data Collection & Binding: Complete Collection

Data binding

Data binding: connect API data to design

Display data in your app

Create data from your app

Delete data from your app

Conditional Visibility

Integrations

Create deep links for your app

Push Notifications with OneSignal

User Authentication

One-time Payment with Stripe

Multilingual apps

App Publication

Publishing your app

App rating alert

Resources

Learn with videos

Learn with articles

Browse by app feature

Good to Know

Manage your account

Join the Bravo community

Powered By GitBook

Autoplay Video

Autoplays an audio-less video when the user is on that app page.

👉 The Tag
Autoplays an audio-less video when the user is on that app page. The video will replace the content of a rectangle shape. Supports URL ending in .mp4. More options to add videos.
📍 Where to add the tag: A rectangle layer
1
//The tag:
2
​
3
[component:video:URL]
4
​
5
//Sample tag to try:
6
​
7
[component:video:https://storage.googleapis.com/coverr-main/mp4%2Fcoverr-sandboarding-in-desert-1585557594519.mp4]
Copied!
What if I have a video file? You will need to upload the video to an online storage that generates an .mp4 URL. Some suggestions: AWS S3 or Airtable .
🏷️ How to add the tag
1.Copy the tag.
    2. Paste the tag into the layer name of a rectangle shape.
     3. Replace the placeholder URL with your own (or try our sample tag).
    4. Import to Bravo Studio & preview on Bravo Vision 🚀 (If you imported the app before, you just need to press the button Update in Bravo Studio to see the changes)
💾 Example files
Duplicate the files below to see how to set it up!
Bravo Tags Cheat Sheet
Figma

Bravo Tags - Previous

Interactive component

Last modified 5mo ago

Copy link

Contents

🏷️ How to add the tag

💾 Example files