Media
The Media component displays media content from your Fluid library with various display modes.
Usage
<!-- Display from library --> <fluid-media library-id="your-library-id"></fluid-media> <!-- Display specific media --> <fluid-media media-id="your-media-id"></fluid-media>
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
library-id | string | — | Library ID to fetch media from |
media-id | string | — | Single media ID to display |
hide-widget | boolean | false | Whether to hide the component |
class-name | string | — | Additional CSS classes |
height | string | — | Thumbnail height |
width | string | — | Thumbnail width |
Display Options
| Attribute | Type | Default | Description |
|---|---|---|---|
embed-type | string | 'popover' | Display mode: 'popover', 'inline', 'inline-shopping' |
auto-open | boolean | false | Auto-open on load (popover mode only) |
thumbnail-foam | boolean | false | Use object-cover for thumbnail |
Display Modes
Popover Mode (Default)
Shows a thumbnail that opens media in a popover overlay:
<fluid-media media-id="your-media-id" embed-type="popover" ></fluid-media>
Inline Mode
Embeds media directly in the page:
<fluid-media media-id="your-media-id" embed-type="inline" ></fluid-media>
Examples
Custom Dimensions
<fluid-media library-id="your-library-id" height="300px" width="500px" ></fluid-media>
Auto-Opening Popover
<fluid-media media-id="your-media-id" embed-type="popover" auto-open="true" ></fluid-media>
JavaScript API
// Get media data const media = await window.FairShareSDK.getMedia("media-slug-or-id");