[{"data":1,"prerenderedAt":859},["ShallowReactive",2],{"navigation":3,"/configuration/placement":238,"/configuration/placement-surround":854},[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":44,"body":240,"description":848,"extension":849,"links":850,"meta":851,"navigation":468,"path":45,"seo":852,"stem":46,"__hash__":853},"docs/02.configuration/5.placement.md",{"type":241,"value":242,"toc":843},"minimark",[243,252,257,366,370,377,662,666,839],[244,245,246,247,251],"p",{},"Placement anchors the widget within its positioning context using a 3×3 grid — each position is a combination of a vertical row and a horizontal column. It works with both fixed and absolute positioning and defaults to ",[248,249,250],"code",{},"bottom-end",".",[253,254,256],"h2",{"id":255},"available-values","Available values",[258,259,260,273],"table",{},[261,262,263],"thead",{},[264,265,266,270],"tr",{},[267,268,269],"th",{},"Value",[267,271,272],{},"Position",[274,275,276,287,297,307,317,327,337,347,357],"tbody",{},[264,277,278,284],{},[279,280,281],"td",{},[248,282,283],{},"top-start",[279,285,286],{},"Top left",[264,288,289,294],{},[279,290,291],{},[248,292,293],{},"top-center",[279,295,296],{},"Top center",[264,298,299,304],{},[279,300,301],{},[248,302,303],{},"top-end",[279,305,306],{},"Top right",[264,308,309,314],{},[279,310,311],{},[248,312,313],{},"middle-start",[279,315,316],{},"Middle left",[264,318,319,324],{},[279,320,321],{},[248,322,323],{},"middle-center",[279,325,326],{},"Center",[264,328,329,334],{},[279,330,331],{},[248,332,333],{},"middle-end",[279,335,336],{},"Middle right",[264,338,339,344],{},[279,340,341],{},[248,342,343],{},"bottom-start",[279,345,346],{},"Bottom left",[264,348,349,354],{},[279,350,351],{},[248,352,353],{},"bottom-center",[279,355,356],{},"Bottom center",[264,358,359,363],{},[279,360,361],{},[248,362,250],{},[279,364,365],{},"Bottom right (default)",[253,367,369],{"id":368},"example","Example",[371,372,373],"scena-container",{},[374,375],"scena-component",{":config":376},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"xs\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[378,379,384],"pre",{"className":380,"code":381,"language":382,"meta":383,"style":383},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import {\n  useScena,\n  ComponentSize,\n  ComponentShape,\n  ComponentPosition,\n  ComponentPlacement,\n} from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: { src: '/video.mp4' },\n  size: ComponentSize.XS,\n  shape: ComponentShape.CIRCLE,\n  container: {\n    position: ComponentPosition.ABSOLUTE,\n    placement: ComponentPlacement.MIDDLE_CENTER,\n  },\n});\n","ts","",[248,385,386,399,409,417,425,433,441,463,470,484,489,511,516,536,564,582,600,610,628,646,652],{"__ignoreMap":383},[387,388,391,395],"span",{"class":389,"line":390},"line",1,[387,392,394],{"class":393},"s7zQu","import",[387,396,398],{"class":397},"sMK4o"," {\n",[387,400,402,406],{"class":389,"line":401},2,[387,403,405],{"class":404},"sTEyZ","  useScena",[387,407,408],{"class":397},",\n",[387,410,412,415],{"class":389,"line":411},3,[387,413,414],{"class":404},"  ComponentSize",[387,416,408],{"class":397},[387,418,420,423],{"class":389,"line":419},4,[387,421,422],{"class":404},"  ComponentShape",[387,424,408],{"class":397},[387,426,428,431],{"class":389,"line":427},5,[387,429,430],{"class":404},"  ComponentPosition",[387,432,408],{"class":397},[387,434,436,439],{"class":389,"line":435},6,[387,437,438],{"class":404},"  ComponentPlacement",[387,440,408],{"class":397},[387,442,444,447,450,453,457,460],{"class":389,"line":443},7,[387,445,446],{"class":397},"}",[387,448,449],{"class":393}," from",[387,451,452],{"class":397}," '",[387,454,456],{"class":455},"sfazB","@retoo/scena",[387,458,459],{"class":397},"'",[387,461,462],{"class":397},";\n",[387,464,466],{"class":389,"line":465},8,[387,467,469],{"emptyLinePlaceholder":468},true,"\n",[387,471,473,475,477,480,482],{"class":389,"line":472},9,[387,474,394],{"class":393},[387,476,452],{"class":397},[387,478,479],{"class":455},"@retoo/scena/styles",[387,481,459],{"class":397},[387,483,462],{"class":397},[387,485,487],{"class":389,"line":486},10,[387,488,469],{"emptyLinePlaceholder":468},[387,490,492,496,499,502,506,509],{"class":389,"line":491},11,[387,493,495],{"class":494},"spNyl","const",[387,497,498],{"class":404}," scena ",[387,500,501],{"class":397},"=",[387,503,505],{"class":504},"s2Zo4"," useScena",[387,507,508],{"class":404},"()",[387,510,462],{"class":397},[387,512,514],{"class":389,"line":513},12,[387,515,469],{"emptyLinePlaceholder":468},[387,517,519,522,525,527,530,533],{"class":389,"line":518},13,[387,520,521],{"class":393},"await",[387,523,524],{"class":404}," scena",[387,526,251],{"class":397},[387,528,529],{"class":504},"mount",[387,531,532],{"class":404},"(",[387,534,535],{"class":397},"{\n",[387,537,539,543,546,549,552,554,556,559,561],{"class":389,"line":538},14,[387,540,542],{"class":541},"swJcz","  video",[387,544,545],{"class":397},":",[387,547,548],{"class":397}," {",[387,550,551],{"class":541}," src",[387,553,545],{"class":397},[387,555,452],{"class":397},[387,557,558],{"class":455},"/video.mp4",[387,560,459],{"class":397},[387,562,563],{"class":397}," },\n",[387,565,567,570,572,575,577,580],{"class":389,"line":566},15,[387,568,569],{"class":541},"  size",[387,571,545],{"class":397},[387,573,574],{"class":404}," ComponentSize",[387,576,251],{"class":397},[387,578,579],{"class":404},"XS",[387,581,408],{"class":397},[387,583,585,588,590,593,595,598],{"class":389,"line":584},16,[387,586,587],{"class":541},"  shape",[387,589,545],{"class":397},[387,591,592],{"class":404}," ComponentShape",[387,594,251],{"class":397},[387,596,597],{"class":404},"CIRCLE",[387,599,408],{"class":397},[387,601,603,606,608],{"class":389,"line":602},17,[387,604,605],{"class":541},"  container",[387,607,545],{"class":397},[387,609,398],{"class":397},[387,611,613,616,618,621,623,626],{"class":389,"line":612},18,[387,614,615],{"class":541},"    position",[387,617,545],{"class":397},[387,619,620],{"class":404}," ComponentPosition",[387,622,251],{"class":397},[387,624,625],{"class":404},"ABSOLUTE",[387,627,408],{"class":397},[387,629,631,634,636,639,641,644],{"class":389,"line":630},19,[387,632,633],{"class":541},"    placement",[387,635,545],{"class":397},[387,637,638],{"class":404}," ComponentPlacement",[387,640,251],{"class":397},[387,642,643],{"class":404},"MIDDLE_CENTER",[387,645,408],{"class":397},[387,647,649],{"class":389,"line":648},20,[387,650,651],{"class":397},"  },\n",[387,653,655,657,660],{"class":389,"line":654},21,[387,656,446],{"class":397},[387,658,659],{"class":404},")",[387,661,462],{"class":397},[253,663,665],{"id":664},"runtime","Runtime",[378,667,669],{"className":380,"code":668,"language":382,"meta":383,"style":383},"import { useScena, ComponentPlacement } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nconst instance = await scena.mount({\n  video: { src: '/video.mp4' },\n});\n\ninstance.config.mergeConfig({\n  container: { placement: ComponentPlacement.TOP_END },\n});\n",[248,670,671,697,701,713,717,731,735,757,777,785,789,808,831],{"__ignoreMap":383},[387,672,673,675,677,679,682,684,687,689,691,693,695],{"class":389,"line":390},[387,674,394],{"class":393},[387,676,548],{"class":397},[387,678,505],{"class":404},[387,680,681],{"class":397},",",[387,683,638],{"class":404},[387,685,686],{"class":397}," }",[387,688,449],{"class":393},[387,690,452],{"class":397},[387,692,456],{"class":455},[387,694,459],{"class":397},[387,696,462],{"class":397},[387,698,699],{"class":389,"line":401},[387,700,469],{"emptyLinePlaceholder":468},[387,702,703,705,707,709,711],{"class":389,"line":411},[387,704,394],{"class":393},[387,706,452],{"class":397},[387,708,479],{"class":455},[387,710,459],{"class":397},[387,712,462],{"class":397},[387,714,715],{"class":389,"line":419},[387,716,469],{"emptyLinePlaceholder":468},[387,718,719,721,723,725,727,729],{"class":389,"line":427},[387,720,495],{"class":494},[387,722,498],{"class":404},[387,724,501],{"class":397},[387,726,505],{"class":504},[387,728,508],{"class":404},[387,730,462],{"class":397},[387,732,733],{"class":389,"line":435},[387,734,469],{"emptyLinePlaceholder":468},[387,736,737,739,742,744,747,749,751,753,755],{"class":389,"line":443},[387,738,495],{"class":494},[387,740,741],{"class":404}," instance ",[387,743,501],{"class":397},[387,745,746],{"class":393}," await",[387,748,524],{"class":404},[387,750,251],{"class":397},[387,752,529],{"class":504},[387,754,532],{"class":404},[387,756,535],{"class":397},[387,758,759,761,763,765,767,769,771,773,775],{"class":389,"line":465},[387,760,542],{"class":541},[387,762,545],{"class":397},[387,764,548],{"class":397},[387,766,551],{"class":541},[387,768,545],{"class":397},[387,770,452],{"class":397},[387,772,558],{"class":455},[387,774,459],{"class":397},[387,776,563],{"class":397},[387,778,779,781,783],{"class":389,"line":472},[387,780,446],{"class":397},[387,782,659],{"class":404},[387,784,462],{"class":397},[387,786,787],{"class":389,"line":486},[387,788,469],{"emptyLinePlaceholder":468},[387,790,791,794,796,799,801,804,806],{"class":389,"line":491},[387,792,793],{"class":404},"instance",[387,795,251],{"class":397},[387,797,798],{"class":404},"config",[387,800,251],{"class":397},[387,802,803],{"class":504},"mergeConfig",[387,805,532],{"class":404},[387,807,535],{"class":397},[387,809,810,812,814,816,819,821,823,825,828],{"class":389,"line":513},[387,811,605],{"class":541},[387,813,545],{"class":397},[387,815,548],{"class":397},[387,817,818],{"class":541}," placement",[387,820,545],{"class":397},[387,822,638],{"class":404},[387,824,251],{"class":397},[387,826,827],{"class":404},"TOP_END ",[387,829,830],{"class":397},"},\n",[387,832,833,835,837],{"class":389,"line":518},[387,834,446],{"class":397},[387,836,659],{"class":404},[387,838,462],{"class":397},[840,841,842],"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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);}",{"title":383,"searchDepth":390,"depth":401,"links":844},[845,846,847],{"id":255,"depth":401,"text":256},{"id":368,"depth":401,"text":369},{"id":664,"depth":401,"text":665},"Anchor the widget within the viewport or container using a 3x3 grid model.","md",null,{},{"title":44,"description":848},"ZpVe6JHS90KpGgWTGPMqmgaf2gE5ziPg91Oo6ZxiVOQ",[855,857],{"title":40,"path":41,"stem":42,"description":856,"children":-1},"Control CSS position of the widget container — fixed, absolute, relative, static.",{"title":48,"path":49,"stem":50,"description":858,"children":-1},"Configure video source, poster, preload, autoplay, loop, muted, volume, and playback options.",1777984320138]