Shape
Set widget shape — circle, portrait, landscape, or square.
Shape controls the aspect ratio and border radius of the video container. Four presets cover the most common layouts — from a fully circular thumbnail to portrait and landscape video formats — without requiring any manual CSS.
Available shapes
| Value | Aspect ratio | Border radius |
|---|---|---|
circle | 1:1 | Fully rounded |
square | 1:1 | Slightly rounded corners |
portrait | 3:4 (vertical) | Rounded corners |
landscape | 4:3 (horizontal) | Rounded corners |
Circle
import { useScena, ComponentShape } from '@retoo/scena';
import '@retoo/scena/styles';
const scena = useScena();
await scena.mount({
video: { src: '/video.mp4' },
shape: ComponentShape.CIRCLE,
});
Square
import { useScena, ComponentShape } from '@retoo/scena';
import '@retoo/scena/styles';
const scena = useScena();
await scena.mount({
video: { src: '/video.mp4' },
shape: ComponentShape.SQUARE,
});
Portrait
import { useScena, ComponentShape } from '@retoo/scena';
import '@retoo/scena/styles';
const scena = useScena();
await scena.mount({
video: { src: '/video.mp4' },
shape: ComponentShape.PORTRAIT,
});
Landscape
import { useScena, ComponentShape } from '@retoo/scena';
import '@retoo/scena/styles';
const scena = useScena();
await scena.mount({
video: { src: '/video.mp4' },
shape: ComponentShape.LANDSCAPE,
});
Runtime
import { useScena, ComponentShape } from '@retoo/scena';
import '@retoo/scena/styles';
const scena = useScena();
const instance = await scena.mount({
video: { src: '/video.mp4' },
});
instance.config.mergeConfig({
shape: ComponentShape.PORTRAIT,
});
Shape and video content
The video fills the shape container using object-fit: cover. If the video's native aspect ratio differs from the shape, the edges are cropped to fit. Choose a shape that matches your video content — portrait for vertical video, landscape for horizontal, circle or square for cropped previews.