Media Container
Description
The Media Container is a versatile and dynamic component designed to display both images and videos with enhanced visual features. It supports various aspect ratios, allows for the addition of corner bugs (small overlay images), and can apply a glow effect to videos. The component also implements a subtle parallax effect for non-reduced motion preferences, creating an engaging visual experience.
Installation
bash
sabaccui add mediaContainer
Usage
Here are examples of how to use the Media Container component in different configurations:
Image with 16:9 aspect ratio
Preview
Image with 5:4 aspect ratio and glow
Preview
Video with 1:1 aspect ratio
Preview
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
media | asset | The main media asset (image or video) to be displayed. Required. | None |
aspectRatio | option | The aspect ratio of the media container. Options: 16x9, 4x3, 1x1, 5x4, 4x5, 3x4, 3x2. Required. | 16x9 |
glow | number | Adds a glow effect to the teaser. Specify the strength value. | None |
cornerBugPosition | option | Position of the corner bug. Options: Top Left (tl), Top Right (tr), Bottom Right (br), Bottom Left (bl). | None |
cornerBug | asset | Image asset to be used as a corner bug overlay. | None |
loop | boolean | Determines whether video content should loop. | false |
Related Components
No related components specified in the provided information
Notes
- The component implements a parallax effect for non-reduced motion preferences.
- Videos automatically play when in view and pause when out of view.
- The component is keyboard accessible for video playback control.
- A glow effect can be applied to images, creating a visually striking appearance.
- The corner bug feature allows for branding or additional visual elements to be overlaid on the media.
Best Practices:
- Ensure that the chosen aspect ratio matches the original media aspect ratio for optimal display.
- Use high-quality images and videos to take full advantage of the component's visual enhancements.
- Consider user preferences for reduced motion when implementing this component in your design.
- Provide meaningful alt text for both the main media and corner bug images to enhance accessibility.
- Use the glow effect judiciously to avoid overwhelming the user interface.