Skip to content
  • There are no suggestions because the search field is empty.

Media component

Learn about the Alert component: its characteristics, options, and common uses

After reading this article, you’ll know:

  • What the Media component is and its major options

  • How to use the components in your application

  • The difference between the Media component and other content components

 

What is the Media component?

The Media component is a component that allows you to display a variety of media content on your pages like images and videos.

The media component on your page

Options

The media components' main options change depending on the type of media you want to show, you can configure this by changing the media type option, here you can set an image, URL, Video, or I-frame.

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 correct, you will be able to view a different page.

Iframe showing in the betty blocks page builder via a media component.

 

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 bar.

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.

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.

Using the media component to show an image.

 

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!