Getting started with embedded media
Learn how to use PDF, QR Code, and Video components to display embedded content.
Use embedded media components in your app to include content, via URL or upload, with which viewers can view and interact. Retool provides the following components:
- PDF, which enables you to embed a PDF via URL, uploaded file, or JavaScript object.
- QR Code, which generates a QR code automatically based on a URL.
- Video, which embeds a video from popular video services.
Features
Key features of embedded media components include:
- Add-ons to provide users with additional information about the component via tooltips and top bars.
- Flexible content options for PDF components.
- Event handlers triggered on click, and playback settings for Video components.
- Customizeable styles.
Specify content options
The Content section of the Inspector contains settings that control the content of the component. Use this section to define the source of your embedded content.
- QR Code
- Video
Use one of the following PDF source options to identify your PDF:
- URL: A publicly-accessible URL for your PDF.
- Storage: A file that you can upload from your computer. Uploaded files are stored using Retool Storage.
- JS: A file object, usually the output of a query.
Enter the URL that you want your QR Code to represent in the Value setting. Retool automatically generates a QR code for you based on the URL.
Enter the URL for your video in the Video URL setting. Retool supports popular video players, including YouTube and Vimeo, as well as direct links to video file types commonly supported by browsers.
To embed YouTube Shorts using the Video component, use the following URL format: https://www.youtube.com/embed/{identifier_string}, where identifier_string is the identifier at the end of the YouTube Shorts URL.
The Add-ons setting defines features that you can add to the component, like a tooltip.
The PDF component includes a Top bar add-on that is enabled by default. You can add a Rotate button and Title that are displayed alongside the page and download controls.
Configure user interaction
The PDF and QR Code components do not enable any user interaction.
Additionally, PDF does not support interactive elements, such as links or form filling. To retain PDF interactivity, consider using an IFrame to embed the PDF directly from a URL.
The Video component includes an Interaction section in the Inspector, which contains settings that control user interaction. Use event handlers to listen for and handle interactions with the Video component, including playing, pausing, loading, or ending the video.
Utilize the other settings—Autoplay, Loop, Volume, and Playback rate—to control the behavior of the video.
Customize appearance
You can customize the presentation of your component in the Spacing and Appearance sections of the Inspector. The settings available in the Appearance section depend on the type of component you use.
All components have a Hidden setting, which you can dynamically control with a truthy value that evaluates to true or false. You can also control the hidden property for a component using the .setHidden() method from event handlers and JavaScript queries.
You can also create custom style rules using the Styles setting. Each component has different styles that you can configure, but common ones include colors, fonts, and text styles. Use app-level or organization-level themes to set these styles across all components.