What is Media component?
The Media component enables you to display different types of media—such as images and videos—on your pages.
Options
The main configuration options for the Media component adapt based on the type of media you wish to display. By selecting the appropriate media type— Image, Data/URL, Video, or I-frame—you can use the component to suit your content needs.
Choosing the Image type allows you to select an image from your application's public file storage. You can allow users to navigate to other pages when they click the image by setting the page or external URL navigator.
With the Data/URL media type, you can display a Video or Image from an external source by filling in the Source option with the video or image URL. The Video media type is similar to the image media type and allows you to select a video from your public file storage to display on your page.
The I-frame media type allows you to show a frame of a different application in your page, insert a URL in the source bar, and if the security settings for both applications are set correctly, you will be able to view a different page.
Currently, certain internal platform limitations may affect the functionality of Video and I-frame options within the Media component. However, you can still display videos by following the alternative method outlined later in this article
Content Security
Not all kinds of content can be shown in a media component due to Content-Security-Policy settings, for example, you can only view your application in an Iframe after changing your CSP settings to allow. for more info read our article about best practices for application management.
Alternative names
All the media types allow you the option to set an alternative name title, this title will show when the content fails to load in, and will also be used by search engines to determine what an image is about.
Using the component
Drag and drop the Media component onto your page in the designated layout component. Choose the media type you would like to show on your page and select a source or insert a URL in the source field.
Image and Data/URL
With Image media type, the setting is as straightforward as possible: select the image you intend to use from the public files. Additionally, you can choose the page end-user will be redirected to on click: both internal and external.
When using the Data/URL media type, enter the desired URL into the source field. You can then choose the source type—Image or Video—below. For now, we recommend working only with Image type. Instructions for embedding video sources will be provided in the following section.
With a successful input, you should see your content appear immediately, once that is done you can set the styling and spacing so that the content fits to it's original sizing and in your application's layout.
Video and I-frame
If you attempt to embed a video using a direct link, short URL, or embed link, the video will not display. For embedding through an I-frame, do not use the full I-frame code—only include the embed URL within the I-frame configuration.
For example, if YouTube provides you with the following embed code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/cYRp9VRZk0c?si=-x58szJnUN564BK5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
You’ll need to adjust it by extracting the source URL attribute’s value just this format:
https://www.youtube.com/embed/cYRp9VRZk0c?si=-x58szJnUN564BK5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen
Or keep it even simpler by using the short URL.
https://www.youtube.com/embed/cYRp9VRZk0c?si=-x58szJnUN564BK5
Finish with setting an alternative name for the content and you can press the compile button to see what it looks like on your page.
Media vs other content components
The Media component is unique and versatile in its own way, and therefore is the best option for showing singular pieces of content, as Images, URLs, Videos and Iframes are all available for display in the component.
However, some use cases involve images in which you could prioritize another component, for example when creating a hero banner.
If you want a header image on your page we often recommend using a Box component, as its background option allows you to set an image for the background of all the components you place within the box.
For more info on creating a hero banner/background image, read this article on setting up an advanced home page.
The Carousel component is the other component you could prioritize over the Media component, if you wish to display multiple images on the same segment of the page, in a slideshow-like fashion.
Since those 2 components are unique in their own way and function, we often see the Media component being used as the champion of showing visual content on pages.
So after reading this article, we know that the Media component is very versatile, can show multiple sources of content, such as videos and Iframes, and can likely fit in any page you want to dress up the look and feel!