[{"data":1,"prerenderedAt":1128},["ShallowReactive",2],{"navigation":3,"/configuration/shape":238,"/configuration/shape-surround":1123},[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":36,"body":240,"description":1117,"extension":1118,"links":1119,"meta":1120,"navigation":392,"path":37,"seo":1121,"stem":38,"__hash__":1122},"docs/02.configuration/3.shape.md",{"type":241,"value":242,"toc":1108},"minimark",[243,247,252,326,329,336,516,519,524,648,651,656,780,783,788,912,916,1081,1085,1104],[244,245,246],"p",{},"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.",[248,249,251],"h2",{"id":250},"available-shapes","Available shapes",[253,254,255,271],"table",{},[256,257,258],"thead",{},[259,260,261,265,268],"tr",{},[262,263,264],"th",{},"Value",[262,266,267],{},"Aspect ratio",[262,269,270],{},"Border radius",[272,273,274,289,301,314],"tbody",{},[259,275,276,283,286],{},[277,278,279],"td",{},[280,281,282],"code",{},"circle",[277,284,285],{},"1:1",[277,287,288],{},"Fully rounded",[259,290,291,296,298],{},[277,292,293],{},[280,294,295],{},"square",[277,297,285],{},[277,299,300],{},"Slightly rounded corners",[259,302,303,308,311],{},[277,304,305],{},[280,306,307],{},"portrait",[277,309,310],{},"3:4 (vertical)",[277,312,313],{},"Rounded corners",[259,315,316,321,324],{},[277,317,318],{},[280,319,320],{},"landscape",[277,322,323],{},"4:3 (horizontal)",[277,325,313],{},[248,327,328],{"id":282},"Circle",[330,331,332],"scena-container",{},[333,334],"scena-component",{":config":335},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"circle\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[337,338,343],"pre",{"className":339,"code":340,"language":341,"meta":342,"style":342},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { useScena, ComponentShape } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: { src: '/video.mp4' },\n  shape: ComponentShape.CIRCLE,\n});\n","ts","",[280,344,345,387,394,408,413,434,439,460,487,505],{"__ignoreMap":342},[346,347,350,354,358,362,365,368,371,374,377,381,384],"span",{"class":348,"line":349},"line",1,[346,351,353],{"class":352},"s7zQu","import",[346,355,357],{"class":356},"sMK4o"," {",[346,359,361],{"class":360},"sTEyZ"," useScena",[346,363,364],{"class":356},",",[346,366,367],{"class":360}," ComponentShape",[346,369,370],{"class":356}," }",[346,372,373],{"class":352}," from",[346,375,376],{"class":356}," '",[346,378,380],{"class":379},"sfazB","@retoo/scena",[346,382,383],{"class":356},"'",[346,385,386],{"class":356},";\n",[346,388,390],{"class":348,"line":389},2,[346,391,393],{"emptyLinePlaceholder":392},true,"\n",[346,395,397,399,401,404,406],{"class":348,"line":396},3,[346,398,353],{"class":352},[346,400,376],{"class":356},[346,402,403],{"class":379},"@retoo/scena/styles",[346,405,383],{"class":356},[346,407,386],{"class":356},[346,409,411],{"class":348,"line":410},4,[346,412,393],{"emptyLinePlaceholder":392},[346,414,416,420,423,426,429,432],{"class":348,"line":415},5,[346,417,419],{"class":418},"spNyl","const",[346,421,422],{"class":360}," scena ",[346,424,425],{"class":356},"=",[346,427,361],{"class":428},"s2Zo4",[346,430,431],{"class":360},"()",[346,433,386],{"class":356},[346,435,437],{"class":348,"line":436},6,[346,438,393],{"emptyLinePlaceholder":392},[346,440,442,445,448,451,454,457],{"class":348,"line":441},7,[346,443,444],{"class":352},"await",[346,446,447],{"class":360}," scena",[346,449,450],{"class":356},".",[346,452,453],{"class":428},"mount",[346,455,456],{"class":360},"(",[346,458,459],{"class":356},"{\n",[346,461,463,467,470,472,475,477,479,482,484],{"class":348,"line":462},8,[346,464,466],{"class":465},"swJcz","  video",[346,468,469],{"class":356},":",[346,471,357],{"class":356},[346,473,474],{"class":465}," src",[346,476,469],{"class":356},[346,478,376],{"class":356},[346,480,481],{"class":379},"/video.mp4",[346,483,383],{"class":356},[346,485,486],{"class":356}," },\n",[346,488,490,493,495,497,499,502],{"class":348,"line":489},9,[346,491,492],{"class":465},"  shape",[346,494,469],{"class":356},[346,496,367],{"class":360},[346,498,450],{"class":356},[346,500,501],{"class":360},"CIRCLE",[346,503,504],{"class":356},",\n",[346,506,508,511,514],{"class":348,"line":507},10,[346,509,510],{"class":356},"}",[346,512,513],{"class":360},")",[346,515,386],{"class":356},[248,517,518],{"id":295},"Square",[330,520,521],{},[333,522],{":config":523},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"square\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[337,525,527],{"className":339,"code":526,"language":341,"meta":342,"style":342},"import { useScena, ComponentShape } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: { src: '/video.mp4' },\n  shape: ComponentShape.SQUARE,\n});\n",[280,528,529,553,557,569,573,587,591,605,625,640],{"__ignoreMap":342},[346,530,531,533,535,537,539,541,543,545,547,549,551],{"class":348,"line":349},[346,532,353],{"class":352},[346,534,357],{"class":356},[346,536,361],{"class":360},[346,538,364],{"class":356},[346,540,367],{"class":360},[346,542,370],{"class":356},[346,544,373],{"class":352},[346,546,376],{"class":356},[346,548,380],{"class":379},[346,550,383],{"class":356},[346,552,386],{"class":356},[346,554,555],{"class":348,"line":389},[346,556,393],{"emptyLinePlaceholder":392},[346,558,559,561,563,565,567],{"class":348,"line":396},[346,560,353],{"class":352},[346,562,376],{"class":356},[346,564,403],{"class":379},[346,566,383],{"class":356},[346,568,386],{"class":356},[346,570,571],{"class":348,"line":410},[346,572,393],{"emptyLinePlaceholder":392},[346,574,575,577,579,581,583,585],{"class":348,"line":415},[346,576,419],{"class":418},[346,578,422],{"class":360},[346,580,425],{"class":356},[346,582,361],{"class":428},[346,584,431],{"class":360},[346,586,386],{"class":356},[346,588,589],{"class":348,"line":436},[346,590,393],{"emptyLinePlaceholder":392},[346,592,593,595,597,599,601,603],{"class":348,"line":441},[346,594,444],{"class":352},[346,596,447],{"class":360},[346,598,450],{"class":356},[346,600,453],{"class":428},[346,602,456],{"class":360},[346,604,459],{"class":356},[346,606,607,609,611,613,615,617,619,621,623],{"class":348,"line":462},[346,608,466],{"class":465},[346,610,469],{"class":356},[346,612,357],{"class":356},[346,614,474],{"class":465},[346,616,469],{"class":356},[346,618,376],{"class":356},[346,620,481],{"class":379},[346,622,383],{"class":356},[346,624,486],{"class":356},[346,626,627,629,631,633,635,638],{"class":348,"line":489},[346,628,492],{"class":465},[346,630,469],{"class":356},[346,632,367],{"class":360},[346,634,450],{"class":356},[346,636,637],{"class":360},"SQUARE",[346,639,504],{"class":356},[346,641,642,644,646],{"class":348,"line":507},[346,643,510],{"class":356},[346,645,513],{"class":360},[346,647,386],{"class":356},[248,649,650],{"id":307},"Portrait",[330,652,653],{},[333,654],{":config":655},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"portrait\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[337,657,659],{"className":339,"code":658,"language":341,"meta":342,"style":342},"import { useScena, ComponentShape } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: { src: '/video.mp4' },\n  shape: ComponentShape.PORTRAIT,\n});\n",[280,660,661,685,689,701,705,719,723,737,757,772],{"__ignoreMap":342},[346,662,663,665,667,669,671,673,675,677,679,681,683],{"class":348,"line":349},[346,664,353],{"class":352},[346,666,357],{"class":356},[346,668,361],{"class":360},[346,670,364],{"class":356},[346,672,367],{"class":360},[346,674,370],{"class":356},[346,676,373],{"class":352},[346,678,376],{"class":356},[346,680,380],{"class":379},[346,682,383],{"class":356},[346,684,386],{"class":356},[346,686,687],{"class":348,"line":389},[346,688,393],{"emptyLinePlaceholder":392},[346,690,691,693,695,697,699],{"class":348,"line":396},[346,692,353],{"class":352},[346,694,376],{"class":356},[346,696,403],{"class":379},[346,698,383],{"class":356},[346,700,386],{"class":356},[346,702,703],{"class":348,"line":410},[346,704,393],{"emptyLinePlaceholder":392},[346,706,707,709,711,713,715,717],{"class":348,"line":415},[346,708,419],{"class":418},[346,710,422],{"class":360},[346,712,425],{"class":356},[346,714,361],{"class":428},[346,716,431],{"class":360},[346,718,386],{"class":356},[346,720,721],{"class":348,"line":436},[346,722,393],{"emptyLinePlaceholder":392},[346,724,725,727,729,731,733,735],{"class":348,"line":441},[346,726,444],{"class":352},[346,728,447],{"class":360},[346,730,450],{"class":356},[346,732,453],{"class":428},[346,734,456],{"class":360},[346,736,459],{"class":356},[346,738,739,741,743,745,747,749,751,753,755],{"class":348,"line":462},[346,740,466],{"class":465},[346,742,469],{"class":356},[346,744,357],{"class":356},[346,746,474],{"class":465},[346,748,469],{"class":356},[346,750,376],{"class":356},[346,752,481],{"class":379},[346,754,383],{"class":356},[346,756,486],{"class":356},[346,758,759,761,763,765,767,770],{"class":348,"line":489},[346,760,492],{"class":465},[346,762,469],{"class":356},[346,764,367],{"class":360},[346,766,450],{"class":356},[346,768,769],{"class":360},"PORTRAIT",[346,771,504],{"class":356},[346,773,774,776,778],{"class":348,"line":507},[346,775,510],{"class":356},[346,777,513],{"class":360},[346,779,386],{"class":356},[248,781,782],{"id":320},"Landscape",[330,784,785],{},[333,786],{":config":787},"{\"video\":{\"src\":\"/examples/example-cat.mp4\",\"autoplay\":false},\"size\":\"md\",\"shape\":\"landscape\",\"container\":{\"position\":\"absolute\",\"placement\":\"middle-center\"},\"ctaButton\":false,\"closeButton\":false}",[337,789,791],{"className":339,"code":790,"language":341,"meta":342,"style":342},"import { useScena, ComponentShape } from '@retoo/scena';\n\nimport '@retoo/scena/styles';\n\nconst scena = useScena();\n\nawait scena.mount({\n  video: { src: '/video.mp4' },\n  shape: ComponentShape.LANDSCAPE,\n});\n",[280,792,793,817,821,833,837,851,855,869,889,904],{"__ignoreMap":342},[346,794,795,797,799,801,803,805,807,809,811,813,815],{"class":348,"line":349},[346,796,353],{"class":352},[346,798,357],{"class":356},[346,800,361],{"class":360},[346,802,364],{"class":356},[346,804,367],{"class":360},[346,806,370],{"class":356},[346,808,373],{"class":352},[346,810,376],{"class":356},[346,812,380],{"class":379},[346,814,383],{"class":356},[346,816,386],{"class":356},[346,818,819],{"class":348,"line":389},[346,820,393],{"emptyLinePlaceholder":392},[346,822,823,825,827,829,831],{"class":348,"line":396},[346,824,353],{"class":352},[346,826,376],{"class":356},[346,828,403],{"class":379},[346,830,383],{"class":356},[346,832,386],{"class":356},[346,834,835],{"class":348,"line":410},[346,836,393],{"emptyLinePlaceholder":392},[346,838,839,841,843,845,847,849],{"class":348,"line":415},[346,840,419],{"class":418},[346,842,422],{"class":360},[346,844,425],{"class":356},[346,846,361],{"class":428},[346,848,431],{"class":360},[346,850,386],{"class":356},[346,852,853],{"class":348,"line":436},[346,854,393],{"emptyLinePlaceholder":392},[346,856,857,859,861,863,865,867],{"class":348,"line":441},[346,858,444],{"class":352},[346,860,447],{"class":360},[346,862,450],{"class":356},[346,864,453],{"class":428},[346,866,456],{"class":360},[346,868,459],{"class":356},[346,870,871,873,875,877,879,881,883,885,887],{"class":348,"line":462},[346,872,466],{"class":465},[346,874,469],{"class":356},[346,876,357],{"class":356},[346,878,474],{"class":465},[346,880,469],{"class":356},[346,882,376],{"class":356},[346,884,481],{"class":379},[346,886,383],{"class":356},[346,888,486],{"class":356},[346,890,891,893,895,897,899,902],{"class":348,"line":489},[346,892,492],{"class":465},[346,894,469],{"class":356},[346,896,367],{"class":360},[346,898,450],{"class":356},[346,900,901],{"class":360},"LANDSCAPE",[346,903,504],{"class":356},[346,905,906,908,910],{"class":348,"line":507},[346,907,510],{"class":356},[346,909,513],{"class":360},[346,911,386],{"class":356},[248,913,915],{"id":914},"runtime","Runtime",[337,917,919],{"className":339,"code":918,"language":341,"meta":342,"style":342},"import { useScena, ComponentShape } 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  shape: ComponentShape.PORTRAIT,\n});\n",[280,920,921,945,949,961,965,979,983,1005,1025,1033,1037,1057,1072],{"__ignoreMap":342},[346,922,923,925,927,929,931,933,935,937,939,941,943],{"class":348,"line":349},[346,924,353],{"class":352},[346,926,357],{"class":356},[346,928,361],{"class":360},[346,930,364],{"class":356},[346,932,367],{"class":360},[346,934,370],{"class":356},[346,936,373],{"class":352},[346,938,376],{"class":356},[346,940,380],{"class":379},[346,942,383],{"class":356},[346,944,386],{"class":356},[346,946,947],{"class":348,"line":389},[346,948,393],{"emptyLinePlaceholder":392},[346,950,951,953,955,957,959],{"class":348,"line":396},[346,952,353],{"class":352},[346,954,376],{"class":356},[346,956,403],{"class":379},[346,958,383],{"class":356},[346,960,386],{"class":356},[346,962,963],{"class":348,"line":410},[346,964,393],{"emptyLinePlaceholder":392},[346,966,967,969,971,973,975,977],{"class":348,"line":415},[346,968,419],{"class":418},[346,970,422],{"class":360},[346,972,425],{"class":356},[346,974,361],{"class":428},[346,976,431],{"class":360},[346,978,386],{"class":356},[346,980,981],{"class":348,"line":436},[346,982,393],{"emptyLinePlaceholder":392},[346,984,985,987,990,992,995,997,999,1001,1003],{"class":348,"line":441},[346,986,419],{"class":418},[346,988,989],{"class":360}," instance ",[346,991,425],{"class":356},[346,993,994],{"class":352}," await",[346,996,447],{"class":360},[346,998,450],{"class":356},[346,1000,453],{"class":428},[346,1002,456],{"class":360},[346,1004,459],{"class":356},[346,1006,1007,1009,1011,1013,1015,1017,1019,1021,1023],{"class":348,"line":462},[346,1008,466],{"class":465},[346,1010,469],{"class":356},[346,1012,357],{"class":356},[346,1014,474],{"class":465},[346,1016,469],{"class":356},[346,1018,376],{"class":356},[346,1020,481],{"class":379},[346,1022,383],{"class":356},[346,1024,486],{"class":356},[346,1026,1027,1029,1031],{"class":348,"line":489},[346,1028,510],{"class":356},[346,1030,513],{"class":360},[346,1032,386],{"class":356},[346,1034,1035],{"class":348,"line":507},[346,1036,393],{"emptyLinePlaceholder":392},[346,1038,1040,1043,1045,1048,1050,1053,1055],{"class":348,"line":1039},11,[346,1041,1042],{"class":360},"instance",[346,1044,450],{"class":356},[346,1046,1047],{"class":360},"config",[346,1049,450],{"class":356},[346,1051,1052],{"class":428},"mergeConfig",[346,1054,456],{"class":360},[346,1056,459],{"class":356},[346,1058,1060,1062,1064,1066,1068,1070],{"class":348,"line":1059},12,[346,1061,492],{"class":465},[346,1063,469],{"class":356},[346,1065,367],{"class":360},[346,1067,450],{"class":356},[346,1069,769],{"class":360},[346,1071,504],{"class":356},[346,1073,1075,1077,1079],{"class":348,"line":1074},13,[346,1076,510],{"class":356},[346,1078,513],{"class":360},[346,1080,386],{"class":356},[248,1082,1084],{"id":1083},"shape-and-video-content","Shape and video content",[244,1086,1087,1088,1091,1092,1094,1095,1097,1098,1100,1101,1103],{},"The video fills the shape container using ",[280,1089,1090],{},"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 — ",[280,1093,307],{}," for vertical video, ",[280,1096,320],{}," for horizontal, ",[280,1099,282],{}," or ",[280,1102,295],{}," for cropped previews.",[1105,1106,1107],"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":342,"searchDepth":349,"depth":389,"links":1109},[1110,1111,1112,1113,1114,1115,1116],{"id":250,"depth":389,"text":251},{"id":282,"depth":389,"text":328},{"id":295,"depth":389,"text":518},{"id":307,"depth":389,"text":650},{"id":320,"depth":389,"text":782},{"id":914,"depth":389,"text":915},{"id":1083,"depth":389,"text":1084},"Set widget shape — circle, portrait, landscape, or square.","md",null,{},{"title":36,"description":1117},"PTmEV4qhq6rixrGE3ApUjoztQTe75U5OyvwdJCLCmPU",[1124,1126],{"title":32,"path":33,"stem":34,"description":1125,"children":-1},"Configure widget dimensions with ComponentSize — xs, sm, md, lg, xl, xxl.",{"title":40,"path":41,"stem":42,"description":1127,"children":-1},"Control CSS position of the widget container — fixed, absolute, relative, static.",1777984319696]