Exact exports, props, slots, hooks, and runtime behavior belong to SDK package reference. Examples are guidance unless explicitly marked copy-paste-safe.

Review component intent and composition guidance before wiring this component into an app. Then use the live playground to confirm the rendered behavior.

Playground

• Import path: @enadhq/enad-react-sdk/client/storefront.
• Live playground: /components/storefront/card-video.

When to use it

Use CardVideo when a page needs playable video inside the SDK surface instead of sending the shopper away to another tab.

CardVideo supports two source classes in v1:

• a supported provider page/share URL through providerUrl
• a direct hosted video file through videoSrc

Keep the component bounded to YouTube, Vimeo, and direct file playback. It does not accept raw iframe HTML, provider SDK snippets, or Storyblok-specific fields.

Composition notes

CardVideo is still a small, prop-driven component, but it now has clear playback behavior:

• thumbnail is the preview image used by thumbnail-inline and thumbnail-lightbox.
• providerUrl normalizes a supported YouTube or Vimeo URL into a safe embed URL.
• videoSrc renders a native HTML `` player.
• playbackMode controls when and where the player mounts:
  • immediate
  • thumbnail-inline
  • thumbnail-lightbox
• autoplay, muted, and playsInline forward to the mounted player when the source supports them. Thumbnail-gated modes never autoplay before user interaction.
• title and caption render below the media and also help label the trigger or player.
• videoUrl remains available as a compatibility alias for older code, but new code should prefer providerUrl or videoSrc.

Behavior and theming guidance

Use immediate when the page should show the player right away. Use thumbnail-inline when the page should keep its place and reveal the player only after intent. Use thumbnail-lightbox when the page needs a thumbnail preview state and more room for playback in a dialog.

Native file playback uses browser media controls. Provider playback stays bounded to supported embed URLs only.

For autoplay examples, pair autoplay with muted so the result stays browser-friendly. If the page needs a thumbnail-first experience, keep autoplay off until the shopper actively opens the player.

Contract scope

• Use SDK package reference for exact props, exports, slots, hooks, and runtime behavior.
• Public import: @enadhq/enad-react-sdk/client/storefront.
• Playground route: /sandbox?component=CardVideo.
• Copy/paste scope: guidance-only. Treat examples as guidance until checked against SDK package reference.

Implementation notes