Container
Configure the widget container with position and placement options.
Container is the root wrapper that positions the widget on the page. It controls both the CSS position strategy — fixed, absolute, relative — and the anchor point within the viewport or parent element, so you can place the widget exactly where it fits your layout.
Config
| Property | Type | Description |
|---|---|---|
position | ComponentPosition | CSS position value |
placement | ComponentPlacement | Position within the viewport or parent element |
customClasses | Partial<ScenaContainerCustomClasses> | Custom CSS classes for the container |
customStyles | Partial<ScenaContainerCustomStyles> | Custom inline styles for the container |
Example
await scena.mount({
video: { src: '/video.mp4' },
container: {
position: ComponentPosition.ABSOLUTE,
placement: ComponentPlacement.BOTTOM_END,
},
});
Customization
The container accepts root as the target key for class and style overrides:
await scena.mount({
video: { src: '/video.mp4' },
container: {
customClasses: {
root: 'my-widget-container',
},
customStyles: {
root: {
padding: '16px',
},
},
},
});
Interface
interface ScenaContainerProps {
position: ComponentPosition;
placement: ComponentPlacement;
customClasses: Partial<ScenaContainerCustomClasses>;
customStyles: Partial<ScenaContainerCustomStyles>;
}