Basic Setup

Scena is a video widget that mounts into any container with a single mount() call. It supports a wide range of configuration options — from size and shape to playback behavior, overlay controls, and visibility transitions.

The configuration panel below lets you adjust every available parameter in real time. Each change is applied to the running instance without remounting, so you can explore how the widget responds to different settings immediately.

Demo

Code

import {
  useScena,
  ComponentSize,
  ComponentShape,
  ComponentPosition,
  ComponentPlacement,
} from '@retoo/scena';

import '@retoo/scena/styles';

const scena = useScena();

const instance = await scena.mount({
  video: {
    src: '/video.mp4',
    autoplay: false,
    loop: true,
    muted: true,
  },
  size: ComponentSize.MD,
  shape: ComponentShape.CIRCLE,
  ctaButton: {
    text: 'Custom action',
  },
  container: {
    position: ComponentPosition.ABSOLUTE,
    placement: ComponentPlacement.MIDDLE_CENTER,
  },
  visibility: {
    isShownOnReady: true,
  },
  preview: {
    size: ComponentSize.SM,
    ctaButton: false,
    closeButton: false,
  },
});

The mount() call is async — it resolves once the widget is mounted in the DOM. The returned instance exposes the full API: playback control, runtime config updates, event listeners, visibility management, and preview state.