Media

Description

The Media component is a versatile and reusable element designed to handle both image and video content within Storyblok projects. It automatically detects the media type based on the file extension and renders either an image or a video element accordingly. This component is ideal for showcasing visual content in a consistent and responsive manner across your website or application.

Installation

sabaccui add media

Usage

Here's an example of how to use the Media component in a Storyblok block:

Preview

For video content:

Schema

• media:
  • Type: asset
  • Required: Yes
  • Filetypes: images, videos
  • Description: The primary content for the Media component. Can be either an image or a video file.

Related Components

Notes

1. The component automatically detects whether the media is an image or a video based on the file extension.
2. For videos, the component creates a video element with muted, playsinline, and loop attributes set.
3. Both images and videos are displayed with object-cover to ensure they fill their container while maintaining aspect ratio.
4. The component uses the alt property of the media asset for accessibility, applying it to the alt attribute for images and aria-label for videos.

Best Practices:

• Always provide meaningful alternative text for images and videos to improve accessibility.
• Optimize media files for web performance, considering file size and format.
• When using videos, consider providing a poster image for better initial loading appearance.
• Test the component with various media types and sizes to ensure consistent behavior across different scenarios.