Skip to main content

Adding a video to your UI

Suggest edit
Updated on April 22, 2022

Supplement your interface with additional materials by adding a video to your application. By using videos, you can provide user guidance or create a richer and immersive experience.

  1. In Dev Studio, open the section to which you want to add a video.
  2. Add the video control:
    • If you are using the view editor, in the pane on the right side of the screen, in the header of the region where you want to add the control, click Add, and then click Data displayVideo.
    • If you are using the full section editor, from the Data display menu, drag the Video component into the layout.
  3. Open the Cell properties dialog box:
    • If you are using the view editor, in the pane on the right side of the screen, hover over the newly added Video control, and then click the Edit icon.
    • If you are using the full section editor, click on the newly added Video control, and then click the View properties icon.
  4. On the General tab, in the Visibility list, define the visibility of the control.
  5. For options other than Always, select additional settings:
    • To leave the space blank even when the video element is invisible, select Reserve space when hidden.
    • To validate a conditional expression on the client, select Run visibility condition on client.
  6. In the Source URL field, select the source of the video file:
    • To enter a URL, select Path, and then in the Path field, enter the address of the target video.
    • To refer to a URL in a property value, select Property reference, and then, in the Property field, select the target property.
    Note: The Video injects an HTML5 <video> tag to a Pega application to enable viewing of video that the system accesses directly from the URL. Consequently, the control does not work with embedded videos that use an <iframe> tag, such as embedded YouTube videos.
  7. Configure other playback settings:
    • To provide users with access to controls such as play or pause, in the All user controls row, click Yes.
    • To enable video autoplay, in the Autoplay row, click Yes.
    • To loop the video, in the Loop row, click Yes.
    • To mute the video, in the Muted row, click Yes.
  8. In the Preload list, select the video buffering method:
    • To buffer the entire video when the element is loaded, select Auto.
    • To download the metadata and start buffering when the user plays the video, select Metadata.
    • To start buffering when the user plays the video, select None.
  9. On the Presentation tab, in the Poster image field, select an image that appears when the video is inactive:
    • To enter a URL, select Path, and then in the Path field, enter the address of the target image.
    • To refer to a property value, select Property reference, and then, in the Property field, select the target property.
  10. In the Specify size row, define how to size your video:
    • To allow the system to define the video size automatically, select Auto.
    • To define specific video size, select Custom, and then, in the Width field, enter the target width for the video.
  11. Click Submit.
Did you find this content helpful? YesNo

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us