0.0.2

Introduction

Lightweight embeddable widget for adding video reels to any website.

What is Scena?

Scena is an embeddable video widget designed to bring short-form video reels directly onto your website. The widget mounts as a floating overlay on top of your page — similar to what you see on social media platforms, but fully under your control.

Scena works on any type of site — landing pages, e-commerce stores, SaaS dashboards — without redirecting visitors elsewhere. The widget ships with configurable video playback, multiple visual shapes, a preview mode, and built-in interactive elements like a CTA button and a close control.

Built with Svelte 5, Scena compiles down to vanilla JavaScript with no framework runtime. The output integrates into React, Vue, Angular, or plain HTML without dependency conflicts. Distribution formats include ES Module, UMD, and CommonJS.

Scena is a fully open-source, non-commercial project. It's built and maintained by a small team in their free time with the goal of helping developers build better projects. If you encounter bugs or rough edges — we'd appreciate your patience and a GitHub issue over frustration.

See it in action

The only required field is video.src — everything else has sensible defaults. Placement and shape determine how the widget integrates into your page.

const instance = await scena.mount({
  video: { src: '/video.mp4', autoplay: false },
  size: ComponentSize.MD,
  shape: ComponentShape.CIRCLE,
  container: {
    position: ComponentPosition.ABSOLUTE,
    placement: ComponentPlacement.MIDDLE_CENTER,
  },
  ctaButton: { text: 'Get in touch' },
});
See the Basic Setup example to explore the full config in practice — an interactive panel lets you tweak every parameter live and observe how the widget responds without writing a single line of code.

Features

Video playback
autoplay, loop, mute, poster, seek, volume
Full control over the video element — configure on mount or change at runtime through the controller API.
Shapes & sizes
circle, square, portrait, landscape
Multiple aspect ratios with predefined size presets. Combine any shape with any size.
CTA button
configurable
Built-in call-to-action overlay with customizable text, styling, and a dedicated click event.
Preview mode
configurable
Compact preview state that expands to the full widget on interaction.
Event system
subscribe / unsubscribe
Typed events for playback changes, user interactions, and lifecycle hooks — connect analytics, navigation.
Runtime updates
mergeConfig / setConfig
Patch or replace the entire config without unmounting.

Bundle size

The production bundle weighs under 30 KB gzipped (JS + CSS combined). Zero runtime dependencies — nothing is loaded beyond the video source you provide.

Full breakdown by format in the Bundle Size reference.

Installation

Install @retoo/scena via npm, pnpm, yarn, or connect via CDN.