Skip to main content







Embeds a native video player.

Use Video as a powerful tool to engage users. However, remember to always show all essential information as text in the application.

Note: if you want to stream videos from YouTube, Vimeo, or others, see the How to Add Video to Your Applications article.

How to use

In the Interface tab of Service Studio, drag the Video block from the Toolbox into your application's screen. At the Properties tab define the source video file to embed. All other parameters such as controls or size are optional.

  1. Drag the Video pattern from the toolbox into the preview.

  2. Set the SourceFile value:

    • If using an external source file, insert the file URL.

    • If using a local file, include the video in a module as a resource and use the runtime path:

      1. In the Data tab, right-click the Resources folder and select Import Resource.

      2. Browse the video file and click Open.

      3. Go to the Interface tab and select the screen where you inserted the Video pattern.
      4. Select the Video pattern.
      5. In the Properties tab, click at the SourceFile field and type the runtime path "". See an example below:

Input Parameters

The following table describes all the available input parameters:

Input Name Description Type Mandatory Default Value
SourceFile Insert the video file URL or the runtime path of the resource video file. Text True none
Width Width (in pixel or percentage) is added for the video, otherwise the original video Width is detected. Text False "100%"
Height Height (in pixel or percentage) is added for the video, otherwise the original video Height is detected. Text False "100%"
Autoplay If True, specifies that the video will start playing as soon as it is ready. Boolean False False
Loop If True, specifies that the video will restart playing as soon as it ends. Boolean False False
Muted If True, specifies that the audio of the video will be disabled. Boolean False False
Controls If False, disabled video controls. In case of mobile, the controls will always be enable. Boolean False True
ExtendedClass Add custom style classes to this Block. Text False none

Layout and Classes

Advanced Use Case

Use custom Play and Pause buttons

  1. Set a name to the Video pattern.

  2. Create Play and Pause actions on the screen.

  3. In the Logic tab, click on the OutSystems UI Web to go to the Video Folder.

  4. Drag the PlayVideo and PauseVideo actions inside the Play and Pause actions you created.

  5. For each server action, set the WidgetId parameter to the name of the Video pattern.

  6. Create the elements you want to act as buttons. You can also wrap icons around containers and set the OnClick to the Play and Pause actions.

  7. Publish and test.


Autoplay parameter only works if Muted is set to True.

Device Compatibility

In case of mobile, the controls will always be enabled.

  • Was this article helpful?