[{"data":1,"prerenderedAt":732},["ShallowReactive",2],{"navigation":3,"/components/container":238,"/components/container-surround":727},[4,22,55,88,105,138,159,180,217],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","01.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"Introduction","/getting-started/introduction","01.getting-started/1.introduction",{"title":15,"path":16,"stem":17},"Installation","/getting-started/installation","01.getting-started/2.installation",{"title":19,"path":20,"stem":21},"Quick Start","/getting-started/quick-start","01.getting-started/3.quick-start",{"title":23,"path":24,"stem":25,"children":26,"page":6},"Configuration","/configuration","02.configuration",[27,31,35,39,43,47,51],{"title":28,"path":29,"stem":30},"Overview","/configuration/overview","02.configuration/1.overview",{"title":32,"path":33,"stem":34},"Size","/configuration/size","02.configuration/2.size",{"title":36,"path":37,"stem":38},"Shape","/configuration/shape","02.configuration/3.shape",{"title":40,"path":41,"stem":42},"Positioning","/configuration/positioning","02.configuration/4.positioning",{"title":44,"path":45,"stem":46},"Placement","/configuration/placement","02.configuration/5.placement",{"title":48,"path":49,"stem":50},"Video","/configuration/video","02.configuration/6.video",{"title":52,"path":53,"stem":54},"Styles","/configuration/styles","02.configuration/7.styles",{"title":56,"path":57,"stem":58,"children":59,"page":6},"Components","/components","03.components",[60,64,68,72,76,80,84],{"title":61,"path":62,"stem":63},"Container","/components/container","03.components/1.container",{"title":65,"path":66,"stem":67},"Close Button","/components/close-button","03.components/2.close-button",{"title":69,"path":70,"stem":71},"CTA Button","/components/cta-button","03.components/3.cta-button",{"title":73,"path":74,"stem":75},"Video Controls","/components/video-controls","03.components/4.video-controls",{"title":77,"path":78,"stem":79},"Video Loader","/components/video-loader","03.components/5.video-loader",{"title":81,"path":82,"stem":83},"Video Progress","/components/video-progress","03.components/6.video-progress",{"title":85,"path":86,"stem":87},"Video Volume","/components/video-volume","03.components/7.video-volume",{"title":89,"path":90,"stem":91,"children":92,"page":6},"Features","/features","04.features",[93,97,101],{"title":94,"path":95,"stem":96},"Preview","/features/preview","04.features/1.preview",{"title":98,"path":99,"stem":100},"Visibility","/features/visibility","04.features/2.visibility",{"title":102,"path":103,"stem":104},"Responsive","/features/responsive","04.features/3.responsive",{"title":106,"path":107,"stem":108,"children":109,"page":6},"API Reference","/api-reference","05.api-reference",[110,114,118,122,126,130,134],{"title":111,"path":112,"stem":113},"useScena","/api-reference/use-scena","05.api-reference/1.use-scena",{"title":115,"path":116,"stem":117},"useConfig","/api-reference/use-config","05.api-reference/2.use-config",{"title":119,"path":120,"stem":121},"Scena Instance","/api-reference/scena-instance","05.api-reference/3.scena-instance",{"title":123,"path":124,"stem":125},"Video Controller","/api-reference/video-controller","05.api-reference/4.video-controller",{"title":127,"path":128,"stem":129},"Video State","/api-reference/video-state","05.api-reference/5.video-state",{"title":131,"path":132,"stem":133},"Visibility API","/api-reference/visibility-api","05.api-reference/6.visibility-api",{"title":135,"path":136,"stem":137},"Preview API","/api-reference/preview-api","05.api-reference/7.preview-api",{"title":139,"path":140,"stem":141,"children":142,"page":6},"Events","/events","06.events",[143,147,151,155],{"title":144,"path":145,"stem":146},"Widget Events","/events/widget-events","06.events/1.widget-events",{"title":148,"path":149,"stem":150},"Video Events","/events/video-events","06.events/2.video-events",{"title":152,"path":153,"stem":154},"Feature Events","/events/feature-events","06.events/3.feature-events",{"title":156,"path":157,"stem":158},"Click Events","/events/click-events","06.events/4.click-events",{"title":160,"path":161,"stem":162,"children":163,"page":6},"Custom Element","/custom-element","07.custom-element",[164,168,172,176],{"title":165,"path":166,"stem":167},"Setup","/custom-element/setup","07.custom-element/1.setup",{"title":169,"path":170,"stem":171},"Usage","/custom-element/usage","07.custom-element/2.usage",{"title":173,"path":174,"stem":175},"DOM Events","/custom-element/events","07.custom-element/3.events",{"title":177,"path":178,"stem":179},"Integration","/custom-element/integration","07.custom-element/4.integration",{"title":181,"path":182,"stem":183,"children":184,"page":6},"Examples","/examples","08.examples",[185,189,193,197,201,205,209,213],{"title":186,"path":187,"stem":188},"Basic Setup","/examples/basic-setup","08.examples/1.basic-setup",{"title":190,"path":191,"stem":192},"Custom Styling","/examples/custom-styling","08.examples/2.custom-styling",{"title":194,"path":195,"stem":196},"Responsive Widget","/examples/responsive-widget","08.examples/3.responsive-widget",{"title":198,"path":199,"stem":200},"Custom Controls","/examples/custom-controls","08.examples/4.custom-controls",{"title":202,"path":203,"stem":204},"Viewport Mount","/examples/viewport-mount","08.examples/5.viewport-mount",{"title":206,"path":207,"stem":208},"Timed Overlay","/examples/timed-overlay","08.examples/6.timed-overlay",{"title":210,"path":211,"stem":212},"Loop Segment","/examples/loop-segment","08.examples/7.loop-segment",{"title":214,"path":215,"stem":216},"Heatmap Data","/examples/heatmap-data","08.examples/8.heatmap-data",{"title":218,"path":219,"stem":220,"children":221,"page":6},"Distribution","/distribution","09.distribution",[222,226,230,234],{"title":223,"path":224,"stem":225},"Formats","/distribution/formats","09.distribution/1.formats",{"title":227,"path":228,"stem":229},"Browser Support","/distribution/browser-support","09.distribution/2.browser-support",{"title":231,"path":232,"stem":233},"Bundle Size","/distribution/bundle-size","09.distribution/3.bundle-size",{"title":235,"path":236,"stem":237},"TypeScript","/distribution/typescript","09.distribution/4.typescript",{"id":239,"title":61,"body":240,"description":720,"extension":721,"links":722,"meta":723,"navigation":724,"path":62,"seo":725,"stem":63,"__hash__":726},"docs/03.components/1.container.md",{"type":241,"value":242,"toc":714},"minimark",[243,247,252,336,340,347,480,484,491,628,632,710],[244,245,246],"p",{},"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.",[248,249,251],"h2",{"id":250},"config","Config",[253,254,255,271],"table",{},[256,257,258],"thead",{},[259,260,261,265,268],"tr",{},[262,263,264],"th",{},"Property",[262,266,267],{},"Type",[262,269,270],{},"Description",[272,273,274,291,306,321],"tbody",{},[259,275,276,283,288],{},[277,278,279],"td",{},[280,281,282],"code",{},"position",[277,284,285],{},[280,286,287],{},"ComponentPosition",[277,289,290],{},"CSS position value",[259,292,293,298,303],{},[277,294,295],{},[280,296,297],{},"placement",[277,299,300],{},[280,301,302],{},"ComponentPlacement",[277,304,305],{},"Position within the viewport or parent element",[259,307,308,313,318],{},[277,309,310],{},[280,311,312],{},"customClasses",[277,314,315],{},[280,316,317],{},"Partial\u003CScenaContainerCustomClasses>",[277,319,320],{},"Custom CSS classes for the container",[259,322,323,328,333],{},[277,324,325],{},[280,326,327],{},"customStyles",[277,329,330],{},[280,331,332],{},"Partial\u003CScenaContainerCustomStyles>",[277,334,335],{},"Custom inline styles for the container",[248,337,339],{"id":338},"example","Example",[341,342,343],"scena-container",{},[344,345],"scena-component",{":config":346},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"bottom-end\"},\"ctaButton\":false,\"closeButton\":false}",[348,349,354],"pre",{"className":350,"code":351,"language":352,"meta":353,"style":353},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","await scena.mount({\n  video: { src: '/video.mp4' },\n  container: {\n    position: ComponentPosition.ABSOLUTE,\n    placement: ComponentPlacement.BOTTOM_END,\n  },\n});\n","ts","",[280,355,356,383,414,425,444,462,468],{"__ignoreMap":353},[357,358,361,365,369,373,377,380],"span",{"class":359,"line":360},"line",1,[357,362,364],{"class":363},"s7zQu","await",[357,366,368],{"class":367},"sTEyZ"," scena",[357,370,372],{"class":371},"sMK4o",".",[357,374,376],{"class":375},"s2Zo4","mount",[357,378,379],{"class":367},"(",[357,381,382],{"class":371},"{\n",[357,384,386,390,393,396,399,401,404,408,411],{"class":359,"line":385},2,[357,387,389],{"class":388},"swJcz","  video",[357,391,392],{"class":371},":",[357,394,395],{"class":371}," {",[357,397,398],{"class":388}," src",[357,400,392],{"class":371},[357,402,403],{"class":371}," '",[357,405,407],{"class":406},"sfazB","/video.mp4",[357,409,410],{"class":371},"'",[357,412,413],{"class":371}," },\n",[357,415,417,420,422],{"class":359,"line":416},3,[357,418,419],{"class":388},"  container",[357,421,392],{"class":371},[357,423,424],{"class":371}," {\n",[357,426,428,431,433,436,438,441],{"class":359,"line":427},4,[357,429,430],{"class":388},"    position",[357,432,392],{"class":371},[357,434,435],{"class":367}," ComponentPosition",[357,437,372],{"class":371},[357,439,440],{"class":367},"ABSOLUTE",[357,442,443],{"class":371},",\n",[357,445,447,450,452,455,457,460],{"class":359,"line":446},5,[357,448,449],{"class":388},"    placement",[357,451,392],{"class":371},[357,453,454],{"class":367}," ComponentPlacement",[357,456,372],{"class":371},[357,458,459],{"class":367},"BOTTOM_END",[357,461,443],{"class":371},[357,463,465],{"class":359,"line":464},6,[357,466,467],{"class":371},"  },\n",[357,469,471,474,477],{"class":359,"line":470},7,[357,472,473],{"class":371},"}",[357,475,476],{"class":367},")",[357,478,479],{"class":371},";\n",[248,481,483],{"id":482},"customization","Customization",[244,485,486,487,490],{},"The container accepts ",[280,488,489],{},"root"," as the target key for class and style overrides:",[348,492,494],{"className":350,"code":493,"language":352,"meta":353,"style":353},"await scena.mount({\n  video: { src: '/video.mp4' },\n  container: {\n    customClasses: {\n      root: 'my-widget-container',\n    },\n    customStyles: {\n      root: {\n        padding: '16px',\n      },\n    },\n  },\n});\n",[280,495,496,510,530,538,547,563,568,577,586,603,609,614,619],{"__ignoreMap":353},[357,497,498,500,502,504,506,508],{"class":359,"line":360},[357,499,364],{"class":363},[357,501,368],{"class":367},[357,503,372],{"class":371},[357,505,376],{"class":375},[357,507,379],{"class":367},[357,509,382],{"class":371},[357,511,512,514,516,518,520,522,524,526,528],{"class":359,"line":385},[357,513,389],{"class":388},[357,515,392],{"class":371},[357,517,395],{"class":371},[357,519,398],{"class":388},[357,521,392],{"class":371},[357,523,403],{"class":371},[357,525,407],{"class":406},[357,527,410],{"class":371},[357,529,413],{"class":371},[357,531,532,534,536],{"class":359,"line":416},[357,533,419],{"class":388},[357,535,392],{"class":371},[357,537,424],{"class":371},[357,539,540,543,545],{"class":359,"line":427},[357,541,542],{"class":388},"    customClasses",[357,544,392],{"class":371},[357,546,424],{"class":371},[357,548,549,552,554,556,559,561],{"class":359,"line":446},[357,550,551],{"class":388},"      root",[357,553,392],{"class":371},[357,555,403],{"class":371},[357,557,558],{"class":406},"my-widget-container",[357,560,410],{"class":371},[357,562,443],{"class":371},[357,564,565],{"class":359,"line":464},[357,566,567],{"class":371},"    },\n",[357,569,570,573,575],{"class":359,"line":470},[357,571,572],{"class":388},"    customStyles",[357,574,392],{"class":371},[357,576,424],{"class":371},[357,578,580,582,584],{"class":359,"line":579},8,[357,581,551],{"class":388},[357,583,392],{"class":371},[357,585,424],{"class":371},[357,587,589,592,594,596,599,601],{"class":359,"line":588},9,[357,590,591],{"class":388},"        padding",[357,593,392],{"class":371},[357,595,403],{"class":371},[357,597,598],{"class":406},"16px",[357,600,410],{"class":371},[357,602,443],{"class":371},[357,604,606],{"class":359,"line":605},10,[357,607,608],{"class":371},"      },\n",[357,610,612],{"class":359,"line":611},11,[357,613,567],{"class":371},[357,615,617],{"class":359,"line":616},12,[357,618,467],{"class":371},[357,620,622,624,626],{"class":359,"line":621},13,[357,623,473],{"class":371},[357,625,476],{"class":367},[357,627,479],{"class":371},[248,629,631],{"id":630},"interface","Interface",[348,633,635],{"className":350,"code":634,"language":352,"meta":353,"style":353},"interface ScenaContainerProps {\n  position: ComponentPosition;\n  placement: ComponentPlacement;\n  customClasses: Partial\u003CScenaContainerCustomClasses>;\n  customStyles: Partial\u003CScenaContainerCustomStyles>;\n}\n",[280,636,637,648,659,670,689,705],{"__ignoreMap":353},[357,638,639,642,646],{"class":359,"line":360},[357,640,630],{"class":641},"spNyl",[357,643,645],{"class":644},"sBMFI"," ScenaContainerProps",[357,647,424],{"class":371},[357,649,650,653,655,657],{"class":359,"line":385},[357,651,652],{"class":388},"  position",[357,654,392],{"class":371},[357,656,435],{"class":644},[357,658,479],{"class":371},[357,660,661,664,666,668],{"class":359,"line":416},[357,662,663],{"class":388},"  placement",[357,665,392],{"class":371},[357,667,454],{"class":644},[357,669,479],{"class":371},[357,671,672,675,677,680,683,686],{"class":359,"line":427},[357,673,674],{"class":388},"  customClasses",[357,676,392],{"class":371},[357,678,679],{"class":644}," Partial",[357,681,682],{"class":371},"\u003C",[357,684,685],{"class":644},"ScenaContainerCustomClasses",[357,687,688],{"class":371},">;\n",[357,690,691,694,696,698,700,703],{"class":359,"line":446},[357,692,693],{"class":388},"  customStyles",[357,695,392],{"class":371},[357,697,679],{"class":644},[357,699,682],{"class":371},[357,701,702],{"class":644},"ScenaContainerCustomStyles",[357,704,688],{"class":371},[357,706,707],{"class":359,"line":464},[357,708,709],{"class":371},"}\n",[711,712,713],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":353,"searchDepth":360,"depth":385,"links":715},[716,717,718,719],{"id":250,"depth":385,"text":251},{"id":338,"depth":385,"text":339},{"id":482,"depth":385,"text":483},{"id":630,"depth":385,"text":631},"Configure the widget container with position and placement options.","md",null,{},true,{"title":61,"description":720},"oQUJZHyFu0Bp444FvP-OnL-_Du1_A3ef44EFrM-EGVU",[728,730],{"title":52,"path":53,"stem":54,"description":729,"children":-1},"Customize the widget appearance with CSS custom properties (variables).",{"title":65,"path":66,"stem":67,"description":731,"children":-1},"Configure or disable the close button that hides the widget.",1777984317791]