Device Media
Description
The Device Media component is a versatile molecule that allows you to showcase media content (images or videos) within various device frames. It supports different device types such as monitors, notebooks, phones, watches, tablets, and TVs. The component offers an optional glow effect and video looping functionality, making it ideal for creating engaging and visually appealing presentations of digital content across different device contexts.
Installation
bash
sabaccui add deviceMedia
Usage
Here are examples of how to use the Device Media component in different configurations:
Image on Monitor
Preview
Image on Phone
Preview
Video on TV
Preview
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
media | asset | The media file (image or video) to be displayed. Required. Supports images and videos. | - |
glow | number | Intensity of the glow effect behind the media. Range: 0-100. | 0 |
device | option | The type of device frame to use. Options: monitor, notebook, phone, watch, tablet, TV. | monitor |
loop | boolean | Whether to loop video content. Only applies to video media. | false |
scale | number | The scale factor in percent for the whole element. | 100 |
Related Components
- Media
Notes
- The component uses a custom video decoder utility to generate a first frame preview for video content.
- Device frames are preloaded as webp images for optimal performance.
- The component implements lazy loading for video content using an Intersection Observer.
- Glow effect is created by applying a blur to a copy of the media behind the main content.
Best Practices:
- Choose appropriate device frames that match the context of your content.
- Use the glow effect sparingly to highlight important content without overwhelming the design.
- Optimize your media files for web delivery to ensure fast loading times.
- Consider using looping for short, engaging video clips that work well with repetition.
- Ensure that the aspect ratio of your media content matches well with the chosen device frame for the best visual results.