Visibility
Control widget visibility with isHidden, isShownOnReady, and animated transitions.
The visibility config controls whether the widget starts hidden and how it transitions between shown and hidden states. By default, the widget mounts hidden and fades in once the video is ready — this avoids showing an empty container while the video loads.
Config
| Property | Type | Default | Description |
|---|---|---|---|
isHidden | boolean | true | Start the widget in a hidden state |
isAnimated | boolean | true | Enable CSS animations for show/hide transitions |
isShownOnReady | boolean | true | Automatically show the widget when the video is ready |
Show on ready
The default behavior — the widget mounts hidden and appears once the video is ready to play:
await scena.mount({
video: { src: '/video.mp4' },
visibility: {
isShownOnReady: true,
},
});
Manual control
Use isHidden to manage visibility without waiting for the video. The widget stays hidden until instance.visibility.show() is called:
await scena.mount({
video: { src: '/video.mp4' },
visibility: {
isHidden: true,
},
});
// Show when needed
instance.visibility.show();
Disable animations
Set isAnimated: false to skip the CSS transition and toggle visibility instantly:
await scena.mount({
video: { src: '/video.mp4' },
visibility: {
isAnimated: false,
},
});
Unmounting also skips the hide transition and removes the widget immediately.
Runtime API
Control visibility through the instance:
// Show the widget
instance.visibility.show();
// Hide the widget
instance.visibility.hide();
// Check current state
instance.visibility.isHidden;
instance.visibility.isShownOnReady;