Media Elements

Media Elements display images and videos inside Pages, Forms, and Page Slices. They allow you to incorporate visual content into your application's interface, including product images, banners, illustrations, demonstrations, and instructional videos.

The ioLoop Page Editor provides three Media Elements:

• Image — Displays images from the Project Media Library or another supported source.
• Video — Displays video files from a configured URL, with options for controlling playback behavior.
• YouTube Video — Displays YouTube-hosted videos, with configurable thumbnail options.

Media Elements are added through the Element Library and configured through Element Settings.

Media files belonging to the Project are managed separately under Frontend → Media. This page focuses on how to use and configure Media Elements within the Page Editor.

Available Media Elements

Element	Purpose	Typical Uses
Image	Displays an image from a configured source.	Product images, logos, photographs, illustrations, banners, and screenshots.
Video	Displays video content from a direct video URL.	Demonstrations, tutorials, product walkthroughs, and promotional videos.
YouTube Video	Displays a video hosted on YouTube.	Tutorials, presentations, demonstrations, and other YouTube content.

All three elements can be placed inside supported layout structures, including Layout Columns, Content Areas, Flexible Areas, and Page Slices.

Adding and Configuring Media Elements

To add media to a Page or Form:

1. Open the Page or Form in the Page Editor.
2. Open the Element Library.
3. Locate the required Media Element.
4. Add the element to the desired location in the page layout.
5. Select the element and open its Element Settings.
6. Configure the media source and any applicable display or playback settings.
7. Preview the page to verify the result.

The available settings depend on the selected element. Images expose source, description, and loading options, while video elements provide additional playback-related settings.

Media Elements also participate in the surrounding layout. Their available display space depends on the dimensions, alignment, and responsive settings of their parent elements.

For more information about placing and organizing elements, see Editing Page Content and Layout Elements.

Image

An Image element displays an image within a Page, Form, or Page Slice.

Images can be used for visual communication, branding, instructional content, or as part of a larger interface design.

Common uses include:

• Product photographs and catalog images.
• Profile and team photographs.
• Company logos and brand graphics.
• Instructional screenshots and diagrams.
• Promotional banners and illustrations.
• Visual content within cards and other repeated layouts.

Image Settings

The Image element provides the following settings:

Setting	Description
Image Location	Specifies the image source to display.
Image Description	Provides descriptive text associated with the image.
Select from Media Library	Allows selection of an image managed within the Project's Media Library.
Auto Sizing	Allows the image to size automatically within the available layout space.
Lazy Loading	Defers image loading until it is needed, helping reduce unnecessary initial loading.

Image Location

Image Location determines which image the element displays.

Images may reference:

• An image stored in the Project's Media Library.
• An externally hosted image available through a supported image URL.

For images that belong to your application, using the Project's Media Library is generally recommended. It keeps media assets organized alongside the rest of the Project.

For example, a product information page might use an Image element to display a product photograph stored in the Media Library.

An external image source may be appropriate when images are maintained by another service.

When using externally hosted images, ensure that the image remains accessible to the application's users. Changes to the external URL, hosting permissions, or availability can prevent the image from displaying.

Select from Media Library

Select from Media Library allows you to choose an existing Project image rather than manually maintaining its external location.

To use a Project image:

1. Select the Image element.
2. Open Element Settings.
3. Choose Select from Media Library.
4. Select the required image from the available Project media.
5. Preview the element to confirm the selection.

The selected image becomes the media source for that element.

The Media Library is the preferred location for reusable Project-owned images, such as branding assets, illustrations, and interface graphics.

For details about managing these files, see Media.

Image Description

Image Description provides a text description of the displayed image.

Descriptions are important for accessibility, particularly when images communicate information that cannot be understood from the surrounding text alone.

A useful description explains the meaning or relevant content of the image rather than simply identifying it as an image.

Examples:

Image	Recommended Description
Product photograph	Blue travel backpack with front zipper pocket
Employee portrait	Profile photograph of Priya Raman
Instructional screenshot	Project Dashboard showing the Create Project button
Data visualization	Bar chart comparing quarterly sales across four regions

For images containing important information, make sure that information is available through the description or nearby page content.

For purely decorative images, avoid unnecessary descriptions that repeat surrounding content. Where an empty description is supported, it is generally preferable to an artificial description for decorative imagery.

Image Description should reflect the image's purpose within the page.

Auto Sizing

Auto Sizing allows the image to adapt to the available space in its layout.

This is particularly useful when an Image element is placed inside a Layout Column, Content Area, or other responsive container.

For example, an Image inside a Layout Column may need to occupy a wider area on desktop while fitting a narrower column on mobile.

Auto Sizing helps the image respond to its available space, but the surrounding layout remains responsible for the overall arrangement.

Consider the following:

• Use Auto Sizing for images that should fit naturally within their parent layout.
• Configure the parent Layout Column when different widths are needed across screen sizes.
• Review image proportions and available space to avoid undesirable distortion, cropping, or overflow.
• Use more controlled dimensions only when the design requires them.

Auto Sizing should be considered together with the dimensions and responsive behavior of the containing layout.

Lazy Loading

Lazy Loading delays fetching an image until the browser determines that the image is needed.

Without lazy loading, browsers may begin requesting images even when they are located far below the visible portion of the page.

Lazy loading can improve initial page performance by reducing unnecessary image requests.

It is particularly useful for:

• Product catalogs containing many images.
• Long informational pages.
• Image-heavy dashboards.
• Repeated cards containing photographs or thumbnails.
• Images located below the initially visible area.

However, lazy loading is not always desirable.

Images that appear immediately when the page opens, such as primary banners or important first-screen content, may benefit from loading without delay.

Important: Lazy Loading is a browser-dependent loading optimization. It does not guarantee that an image will load at the exact moment it becomes visible, and it does not reduce the actual file size.

For image-heavy applications, combine lazy loading with appropriately sized and optimized image assets.

Video

A Video element displays video content from a configured video URL.

Unlike the YouTube Video element, Video is intended for video content supplied directly through a video resource rather than through a YouTube page URL.

Typical uses include:

• Product demonstrations.
• Application walkthroughs.
• Training and instructional clips.
• Promotional videos.
• Short animations or visual loops.
• Videos hosted through the Project or an external media service.

The Video element includes settings for controlling how playback starts, whether audio is muted, how the video behaves on mobile devices, and which playback capabilities are available.

Video Settings

Setting	Description
Video Select	Specifies the URL of the video to display. Use the browse button to choose a video from the project's media library
Thumbnail Image	Specifies an image used as a preview or poster for the video.
Auto Play	Requests automatic playback when supported by the browser.
Mute Audio	Configures the video to play without audio output.
Plays Inline	Requests video playback within the page instead of fullscreen playback.
Plays when Visible	Controls playback based on whether the video is visible.
Loop Video	Repeats the video when playback reaches the end.
Disable PiP	Requests that Picture-in-Picture playback be disabled.
Disable Remote Play	Requests that remote playback capabilities be disabled.
MIME Type	Optionally specifies the video media type.
Controls List	Optionally influences which playback controls are offered.
Width	Optionally specifies the video display width.
Height	Optionally specifies the video display height.

Video Select

Video Select identifies the video resource that the element should play.

The URL should point to a video resource supported by the viewer's browser, rather than an ordinary web page containing a video player.

Use the browse button to choose a video from the project's media library or a externally hosted MP4 video URL such as:

https://media.example.com/videos/product-demo.mp4

Video playback depends on several factors, including:

• The video format and encoding.
• Browser support for the supplied media format.
• Whether the resource is accessible to the viewer.
• The behavior and configuration of the hosting service.
• Network availability and loading performance.

A video file's extension alone does not guarantee that every browser can play it. The underlying video and audio codecs must also be supported.

For broadly compatible browser playback, MP4 video using widely supported codecs such as H.264 for video and AAC for audio is a common choice.

Other formats may be appropriate depending on the target browsers and hosting environment.

When using externally hosted video content, prefer stable HTTPS URLs and ensure the hosting service allows the video to be delivered to the intended audience.

Important: Use the YouTube Video element for YouTube-hosted content rather than placing a regular YouTube watch-page URL in the Video URL setting.

Thumbnail Image

Thumbnail Image specifies URL of an image that represents the video before playback or when a preview is displayed. Use the browse button to select an image from the project's media library.

The thumbnail should communicate what users can expect when they play the video.

Examples include:

• A screenshot from a product walkthrough.
• A representative frame from an instructional video.
• A title graphic for a training session.
• A preview image for a promotional clip.

Choose a thumbnail with proportions appropriate for the video display area.

For conventional widescreen videos, a 16:9 thumbnail is often suitable.

A thumbnail improves the presentation of video content but does not change the video's source, encoding, or playback capabilities.

Auto Play

Auto Play requests that the browser start playing the video automatically.

This can be useful for:

• Short product demonstrations.
• Background or ambient visual content.
• Silent animations.
• Automatically presented preview content.

However, automatic playback is subject to browser policies.

Most modern browsers restrict automatic playback when a video contains audible audio. Browser settings, device policies, and user preferences may also affect whether playback begins.

For more predictable automatic playback, use Auto Play together with Mute Audio.

Even with these settings, automatic playback should not be treated as guaranteed.

Avoid relying on Auto Play to communicate information that users must see or hear.

Mute Audio

Mute Audio configures the video to play without audible sound.

Use this option when:

• Audio is not necessary for the content.
• The video is intended as a silent visual demonstration.
• Automatic playback is desired.
• The video is used as ambient content within a page.

Muting a video affects playback audio; it does not remove audio tracks from the underlying media file.

For tutorials or instructional videos where narration is important, allow users to access the audio rather than depending on silent playback.

Plays Inline

Plays Inline requests that the video play within its assigned page area.

This is particularly relevant on mobile devices, where some browsers may otherwise use fullscreen video playback.

Inline playback is useful when the video is part of a larger interface containing surrounding text, controls, or related content.

For example, a product details page might display a short demonstration next to product information.

Enabling Plays Inline helps preserve the intended page experience on supported devices.

Actual behavior can still vary by browser and operating system.

Plays when Visible

Plays when Visible controls video playback based on whether the element is visible within the page.

This is useful for videos that should play when users scroll to them instead of playing continuously regardless of their position.

Typical scenarios include:

• Demonstration videos embedded in long pages.
• Promotional videos within product sections.
• Short videos included in content-heavy layouts.
• Video elements that should be associated with the user's current viewing area.

Use this setting when visibility-based playback is preferable to unconditional playback.

Keep in mind that visibility-based playback may also be affected by browser restrictions on automatic playback. When combining this setting with Auto Play, Mute Audio may improve compatibility.

Visibility-based playback is different from lazy loading: it controls playback behavior rather than necessarily preventing the video resource from being downloaded.

Loop Video

Loop Video causes playback to repeat after the video reaches the end.

Looping is useful for:

• Short animations.
• Silent product demonstrations.
• Repeating visual instructions.
• Background videos.
• Ambient visual content.

For example, a short clip demonstrating a feature could repeat so viewers can observe the interaction without manually restarting playback.

Avoid looping longer tutorials, presentations, or videos where users expect playback to stop after completion.

When combining Loop Video with Auto Play, consider muting the audio to prevent repeated sound from becoming disruptive.

Disable PiP

Disable PiP requests that the browser disable Picture-in-Picture functionality for the video.

Picture-in-Picture allows a video to continue playing in a small floating window while the user interacts with other content.

Disabling this functionality may be useful when the video is intended to remain within a specific application interface.

Browser support varies, and some browsers may not honor every restriction.

This setting should not be treated as a content protection mechanism.

Disable Remote Play

Disable Remote Play requests that the browser disable supported remote playback capabilities.

Remote playback may allow a video to be sent to another display or compatible playback device.

This option can be useful when video playback should remain associated with the application interface.

As with Picture-in-Picture, actual behavior depends on the browser and device.

Disable Remote Play should not be considered a security or access-control feature.

MIME Type

MIME Type optionally identifies the media format associated with the Video URL.

A MIME type tells the browser what kind of media resource is being supplied.

Common examples include:

MIME Type	Media Format
video/mp4	MP4 video
video/webm	WebM video
video/ogg	Ogg video

Specify a MIME Type when the configuration requires an explicit content type or when doing so helps identify the supplied media format.

The MIME Type should correspond to the actual resource.

Important: Specifying a MIME Type does not convert the video into that format. The supplied file and its codecs must still be compatible with the viewer's browser.

Controls List

Controls List optionally influences the playback controls made available by the browser.

Depending on browser support, video playback interfaces may provide controls for operations such as:

• Playing and pausing.
• Seeking through the video.
• Changing volume.
• Entering fullscreen mode.
• Downloading or using other browser-supported playback features.

Controls List provides additional control over the browser's playback interface where supported.

Because playback interfaces are implemented by browsers, individual control-list directives may be handled differently across browsers.

Restricting a download control, for example, should not be considered protection against obtaining an otherwise publicly accessible video resource.

For most instructional or user-controlled videos, retain an accessible playback experience so users can start, pause, and navigate the content.

Width and Height

Width and Height allow you to specify the dimensions used for displaying the Video element.

These settings can be useful when a video must fit within a particular design region.

However, fixed dimensions should be used carefully in responsive interfaces.

For example, a video sized for a desktop layout may become too wide for a mobile screen.

When configuring video dimensions:

• Consider the aspect ratio of the source video.
• Avoid dimensions that distort the video.
• Check the dimensions of the parent Layout Column or Content Area.
• Preview the element on desktop, tablet, and mobile layouts.
• Prefer a responsive arrangement where fixed sizing is not necessary.

A common widescreen video uses a 16:9 aspect ratio. Maintaining a suitable aspect ratio helps preserve the intended appearance of the video.

YouTube Video

A YouTube Video element displays content hosted on YouTube within the application interface.

Use this element when videos are maintained on YouTube rather than supplied as direct video files.

Common uses include:

• Product tutorials.
• Educational content.
• Demonstration videos.
• Recorded presentations.
• Public training videos.
• Marketing and promotional content.

The YouTube Video element provides settings for selecting the video and configuring its preview.

YouTube Video Settings

Setting	Description
YouTube URL	Specifies the YouTube video to display.
Thumbnail Type	Selects the type of thumbnail preview: None, Image, or Video.
Thumbnail Image	Specifies an image preview when the Image thumbnail type is selected.
Thumbnail Video	Specifies a video preview when the Video thumbnail type is selected.

YouTube URL

YouTube URL identifies the YouTube-hosted video to display.

For example:

https://www.youtube.com/watch?v=VIDEO_ID

Use a valid YouTube URL for the required video.

The video's availability depends on YouTube and the video's own access and embedding settings.

For example:

• Public videos may be available for embedding when their settings permit it.
• Unlisted videos may be usable when embedding is permitted.
• Private videos or videos with embedding restrictions may not be available to application users.
• Deleted, restricted, or unavailable videos may stop displaying.

Before publishing a page, verify that the intended users can actually view the embedded video.

YouTube remains responsible for hosting and delivering the video content. Playback availability, provider branding, and other YouTube-controlled behavior may vary according to the provider's policies and viewer environment.

Thumbnail Type

Thumbnail Type determines the preview configuration used by the YouTube Video element.

Three options are available:

Thumbnail Type	Behavior	Recommended Use
None	Does not configure a custom image or video thumbnail.	When a custom preview is unnecessary.
Image	Uses a configured still image as the thumbnail.	When a specific preview image should represent the video.
Video	Uses a configured video resource as the thumbnail.	When a video preview is preferred over a static image.

The thumbnail type affects the preview representation of the element. It does not change the YouTube video identified by YouTube URL.

Thumbnail Image

When Thumbnail Type is set to Image, use Thumbnail Image to configure the preview image. Use the browse button to select an image from the project's media library.

For example, an instructional YouTube video might use a custom thumbnail containing the tutorial title and a relevant screenshot.

Choose images that accurately represent the video content.

Avoid using unrelated or misleading thumbnail imagery, as it can create confusion about what the user will see.

Thumbnail Video

When Thumbnail Type is set to Video, use Thumbnail Video to identify the video resource used as the preview. Use the browse button to select a video from the project's media library.

This is useful when a moving preview better communicates the video's content than a static image.

For example, a short product demonstration preview may help users recognize the feature being discussed in the full YouTube video.

The thumbnail video is separate from the main video identified by YouTube URL.

Keep preview videos short and relevant. Consider their file sizes and playback compatibility, since video previews may involve more network activity than static thumbnails.

Do not assume that a video thumbnail will automatically play with audio or that its playback behavior is identical across browsers.

Choosing the Right Media Element

Choose the element based on the source and intended presentation of the content.

Requirement	Recommended Element
Display a product photograph	Image
Display a company logo	Image
Display an instructional screenshot	Image
Display an image from Project media	Image with Media Library selection
Display a directly hosted video file	Video
Play a short looping visual demonstration	Video
Configure direct video playback behavior	Video
Embed a YouTube tutorial	YouTube Video
Display YouTube content with a custom image preview	YouTube Video with Image thumbnail
Display YouTube content with a video preview	YouTube Video with Video thumbnail

Use Video when you need to configure playback behavior for a directly supplied video resource.

Use YouTube Video when the source content is hosted on YouTube and should be presented through that element's supported configuration.

Media Elements in Page Layouts

Media Elements work together with Layout Elements to create structured, responsive interfaces.

An Image or Video determines what media is displayed, while its parent layout determines how that content is positioned relative to other elements.

For example, a product information section might use the following structure:

Layout Container
  Layout Row
    Layout Column
      Image
    Layout Column
      Heading
      Text
      Button

In this example:

• The Layout Container defines the section's overall width.
• The Layout Row arranges the two columns.
• The first Layout Column contains the product image.
• The second Layout Column contains the associated product information and action button.

On desktop, the columns might appear side by side. On mobile, they can be configured to stack vertically.

The Image element's Auto Sizing setting can help it adapt to the space available within its column.

Media in Content Areas

Use a Content Area when media needs to appear inside a bounded region with controlled dimensions or overflow behavior.

For example, an instructional video might appear inside a dedicated content panel beside supporting instructions.

Be careful when combining large media with overflow options such as Hide or Clip. Important parts of the media may become inaccessible or visually cut off.

Media in Flexible Areas

Use a Flexible Area when media should align with a group of other elements.

For example, a small Image representing an organization could appear next to a Heading and Badge.

Flexible Areas are useful for compact alignment, while Layout Rows and Layout Columns are generally more suitable for larger sections.

Responsive Media

Media should be tested at the different screen sizes supported by the page layout.

When reviewing responsive behavior, check:

• Whether images and videos fit within their parent elements.
• Whether image proportions remain appropriate.
• Whether important content is cropped or clipped.
• Whether adjacent text has enough space.
• Whether video playback controls are usable on mobile.
• Whether fixed Width and Height settings cause overflow.
• Whether thumbnail images display at the intended proportions.

For detailed layout configuration, see Layout Elements.

Common Configuration Examples

The following examples illustrate practical combinations of Media Element settings.

Product Image in a Catalog

For a product image displayed in a catalog or card layout:

Setting	Recommended Approach
Element	Image
Image Location	Project Media Library or supported image source
Image Description	Describe the product and its relevant visual characteristics
Auto Sizing	Enable for responsive layouts
Lazy Loading	Enable for images located below the initially visible area

Keep product imagery consistent in proportions and presentation so repeated cards appear organized.

Automatically Playing Product Demonstration

For a short, silent video demonstrating a feature:

Setting	Recommended Approach
Element	Video
Video URL	Direct URL to the demonstration video
Thumbnail Image	Representative frame from the demonstration
Auto Play	Enable
Mute Audio	Enable
Plays Inline	Enable
Loop Video	Enable when continuous repetition is intended
Plays when Visible	Enable when playback should follow visibility

This configuration is suitable for short visual demonstrations where sound is unnecessary.

Automatic playback remains subject to browser policies.

Instructional Video

For a tutorial that users should play when they are ready:

Setting	Recommended Approach
Element	Video
Video URL	Direct URL to the instructional video
Thumbnail Image	Image showing the tutorial topic
Auto Play	Disable
Mute Audio	Disable when narration is important
Plays Inline	Enable where appropriate
Loop Video	Disable

This allows the user to decide when to begin watching the video and preserves its instructional audio.

YouTube Tutorial

For a tutorial hosted on YouTube:

Setting	Recommended Approach
Element	YouTube Video
YouTube URL	URL of the tutorial
Thumbnail Type	Image
Thumbnail Image	Image representing the tutorial

Before publishing, confirm that YouTube permits the video to be embedded and that the intended audience can access it.

Performance and Accessibility Considerations

Media can significantly affect page performance and usability, particularly when multiple images or videos are displayed.

Image and Video File Sizes

Large media files can increase page loading times and consume more bandwidth.

Use image dimensions and formats appropriate for the intended display size.

For example, a small thumbnail generally does not need the same resolution as a full-width promotional image.

For videos, consider the resolution, bitrate, duration, and encoding format.

Higher-quality media may require more bandwidth and processing resources.

Accessible Media Content

Images that communicate important information should have useful descriptions.

For videos containing spoken instructions or information, consider providing captions, transcripts, or equivalent text content where appropriate.

Avoid relying exclusively on visual or audible information to communicate essential instructions.

Video playback should also remain usable for people who prefer not to use automatic playback or who need to control the pace of the content.

Browser Compatibility

Video playback behavior can vary by browser and device.

This is particularly relevant for:

• Automatic playback.
• Inline playback.
• Picture-in-Picture.
• Remote playback.
• Native playback controls.
• Supported media formats.

Preview and test important media interactions in the browsers and devices your application is intended to support.

Media Availability and Access

The browser must be able to access the configured media source for it to display correctly.

Externally hosted media may stop working if the source is moved, deleted, restricted, or unavailable.

Project media intended for frontend display should not be used to store confidential or sensitive files that require restricted access.

The visibility of an Image or Video element within the application is not, by itself, a security boundary for the underlying media resource.

Good Practices

• Use the Media Library for Project-owned assets. Keep images and other supported Project media organized and reusable.
• Use meaningful image descriptions. Describe the information conveyed by an image without repeating unnecessary surrounding text.
• Design for responsive layouts. Configure media together with its parent Layout Elements.
• Use Lazy Loading appropriately. Prioritize immediate loading for important first-screen imagery and consider lazy loading for content farther down the page.
• Optimize media files. Avoid unnecessarily large images and videos.
• Choose stable media sources. Verify that URLs remain accessible to the intended audience.
• Use Auto Play selectively. Prefer user-controlled playback for instructional content that requires attention or audio.
• Keep video previews relevant. Thumbnails should accurately represent the content being played.
• Test playback on mobile devices. Browser restrictions and display behavior can differ from desktop environments.
• Preserve accessibility. Provide image descriptions and appropriate alternatives for important visual or audio content.

Common Mistakes

Avoid these patterns:

• Using the wrong video element. A YouTube watch-page URL should be configured with YouTube Video rather than treated as a direct video file.
• Using images without meaningful descriptions. Important information may become inaccessible to users relying on assistive technologies.
• Using oversized media files. Large assets can reduce application performance.
• Forcing fixed media dimensions. This can create responsive layout problems or distorted content.
• Relying on Auto Play for essential content. Browsers may prevent playback from starting automatically.
• Enabling Auto Play with audible audio without considering browser restrictions. This can lead to inconsistent playback behavior.
• Looping long instructional videos. Repeated playback may disrupt the user experience.
• Using misleading or unrelated thumbnails. Preview imagery should match the content.
• Assuming browser control restrictions protect video files. Disabling playback features does not secure an otherwise accessible resource.
• Failing to test externally hosted media. Hosting restrictions or unsupported media formats may prevent content from displaying.

Media Elements are most effective when their source, presentation, loading behavior, and playback configuration work together with the surrounding page design.

Related Topics

• Element Library — Add Image, Video, and YouTube Video elements.
• Element Settings — Configure the properties of individual elements.
• Layout Elements — Arrange media within responsive page structures.
• Editing Page Content — Place and edit elements in the Page Editor.
• Text and Content — Add headings, descriptions, and labels alongside media.
• Media — Manage Project media assets.