{"version":3,"file":"WithResponsiveYouTube.WIpk3LXI.mjs","names":["useRef","useState","useCallback","useMemo"],"sources":["https:/framerusercontent.com/modules/ZmEIvWrMf5SfD5cS8wn6/PrDxMVU2P34t0C9TLCYS/WithResponsiveYouTube.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{forwardRef,startTransition,useCallback,useEffect,useMemo,useRef,useState}from\"react\";/*\nUser request:\nCreate a Framer code override export named withResponsiveYouTube for an existing external YouTube canvas element.\nIt must preserve the canvas element and all video controls/URL parameters.\nOn viewport widths below 1200px only, make the element itself fit its parent content column with width: 100%, max-width: 100%, min-width: 0, aspect-ratio: 16 / 9, height: auto, overflow: hidden, and display: block.\nEnsure any immediate rendered wrapper/iframe produced by the wrapped component fills width and height, has max-width: 100%, min-width: 0, display: block, and no fixed 560px-style width.\nDo not apply page-level overflow hiding, transforms, padding, typography, CMS, content, SEO, or URL changes.\nAt 1200px and above preserve the existing canvas dimensions and placement exactly.\nThis must be an override, not a new code component, and should be safe for static rendering in Framer.\n*/export function withResponsiveYouTube(Component){return /*#__PURE__*/forwardRef(function WithResponsiveYouTube(props,ref){const wrappedRef=useRef(null);const[isNarrow,setIsNarrow]=useState(false);const assignRefs=useCallback(node=>{wrappedRef.current=node;if(typeof ref===\"function\"){ref(node);}else if(ref&&typeof ref===\"object\"){ref.current=node;}},[ref]);useEffect(()=>{if(typeof window===\"undefined\")return;const mediaQuery=window.matchMedia(\"(max-width: 1199px)\");const update=()=>{startTransition(()=>setIsNarrow(mediaQuery.matches));};update();mediaQuery.addEventListener(\"change\",update);return()=>{mediaQuery.removeEventListener(\"change\",update);};},[]);useEffect(()=>{if(typeof window===\"undefined\")return;const root=wrappedRef.current;if(!root)return;const immediateChild=root.firstElementChild;const iframe=(immediateChild?.tagName.toLowerCase()===\"iframe\"?immediateChild:(immediateChild?.querySelector(\"iframe\")))||(root.tagName.toLowerCase()===\"iframe\"?root:null);const previousImmediateStyle=immediateChild?.getAttribute(\"style\")??null;const previousIframeStyle=iframe?.getAttribute(\"style\")??null;const previousIframeWidth=iframe?.getAttribute(\"width\")??null;const previousIframeHeight=iframe?.getAttribute(\"height\")??null;const previousIframeLoading=iframe?.getAttribute(\"loading\")??null;if(iframe){iframe.setAttribute(\"loading\",\"lazy\");}if(isNarrow){if(immediateChild){immediateChild.style.width=\"100%\";immediateChild.style.height=\"100%\";immediateChild.style.maxWidth=\"100%\";immediateChild.style.minWidth=\"0\";immediateChild.style.display=\"block\";}if(iframe){iframe.style.width=\"100%\";iframe.style.height=\"100%\";iframe.style.maxWidth=\"100%\";iframe.style.minWidth=\"0\";iframe.style.display=\"block\";iframe.setAttribute(\"width\",\"100%\");iframe.removeAttribute(\"height\");}}return()=>{if(immediateChild){if(previousImmediateStyle===null)immediateChild.removeAttribute(\"style\");else immediateChild.setAttribute(\"style\",previousImmediateStyle);}if(iframe){if(previousIframeStyle===null)iframe.removeAttribute(\"style\");else iframe.setAttribute(\"style\",previousIframeStyle);if(previousIframeWidth===null)iframe.removeAttribute(\"width\");else iframe.setAttribute(\"width\",previousIframeWidth);if(previousIframeHeight===null)iframe.removeAttribute(\"height\");else iframe.setAttribute(\"height\",previousIframeHeight);if(previousIframeLoading===null)iframe.removeAttribute(\"loading\");else iframe.setAttribute(\"loading\",previousIframeLoading);}};},[isNarrow]);const responsiveStyle=useMemo(()=>{if(!isNarrow)return props.style;return{...props.style,width:\"100%\",maxWidth:\"100%\",minWidth:0,aspectRatio:\"16 / 9\",height:\"auto\",overflow:\"hidden\",display:\"block\"};},[isNarrow,props.style]);return /*#__PURE__*/_jsx(Component,{ref:assignRefs,...props,style:responsiveStyle});});}\nexport const __FramerMetadata__ = {\"exports\":{\"withResponsiveYouTube\":{\"type\":\"reactHoc\",\"name\":\"withResponsiveYouTube\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./WithResponsiveYouTube.map"],"mappings":"qKASE,SAAgB,EAAsB,EAAU,CAAC,OAAoB,EAAW,SAA+B,EAAM,EAAI,CAAC,IAAM,EAAWA,EAAO,IAAI,EAAO,CAAC,EAAS,GAAaC,EAAS,EAAK,EAAQ,EAAWC,EAAY,GAAM,CAAC,EAAW,QAAQ,EAAQ,OAAO,GAAM,WAAY,EAAI,CAAI,EAAW,GAAK,OAAO,GAAM,WAAU,EAAI,QAAQ,EAAM,EAAE,CAAC,CAAG,CAAC,EAAE,MAAc,CAAC,GAAU,IAAS,OAAY,OAAO,IAAM,EAAW,EAAO,WAAW,qBAAqB,EAAQ,MAAW,CAAC,MAAoB,EAAY,EAAW,OAAO,CAAC,CAAE,EAAwD,OAAtD,EAAO,EAAE,EAAW,iBAAiB,SAAS,CAAM,MAAY,CAAC,EAAW,oBAAoB,SAAS,CAAM,CAAE,CAAE,EAAE,CAAC,CAAC,EAAE,MAAc,CAAC,GAAU,IAAS,OAAY,OAAO,IAAM,EAAK,EAAW,QAAQ,GAAG,CAAC,EAAK,OAAO,IAAM,EAAe,EAAK,kBAAwB,GAAQ,GAAgB,QAAQ,YAAY,IAAI,SAAS,EAAgB,GAAgB,cAAc,QAAQ,KAAM,EAAK,QAAQ,YAAY,IAAI,SAAS,EAAK,MAAY,EAAuB,GAAgB,aAAa,OAAO,GAAG,KAAW,EAAoB,GAAQ,aAAa,OAAO,GAAG,KAAW,EAAoB,GAAQ,aAAa,OAAO,GAAG,KAAW,EAAqB,GAAQ,aAAa,QAAQ,GAAG,KAAW,EAAsB,GAAQ,aAAa,SAAS,GAAG,KAAoe,OAA5d,GAAQ,EAAO,aAAa,UAAU,MAAM,EAAM,IAAa,IAAgB,EAAe,MAAM,MAAM,OAAO,EAAe,MAAM,OAAO,OAAO,EAAe,MAAM,SAAS,OAAO,EAAe,MAAM,SAAS,IAAI,EAAe,MAAM,QAAQ,SAAY,IAAQ,EAAO,MAAM,MAAM,OAAO,EAAO,MAAM,OAAO,OAAO,EAAO,MAAM,SAAS,OAAO,EAAO,MAAM,SAAS,IAAI,EAAO,MAAM,QAAQ,QAAQ,EAAO,aAAa,QAAQ,MAAM,EAAE,EAAO,gBAAgB,QAAQ,QAAc,CAAI,IAAmB,IAAyB,KAAK,EAAe,gBAAgB,OAAO,EAAO,EAAe,aAAa,QAAQ,CAAsB,GAAM,IAAW,IAAsB,KAAK,EAAO,gBAAgB,OAAO,EAAO,EAAO,aAAa,QAAQ,CAAmB,EAAK,IAAsB,KAAK,EAAO,gBAAgB,OAAO,EAAO,EAAO,aAAa,QAAQ,CAAmB,EAAK,IAAuB,KAAK,EAAO,gBAAgB,QAAQ,EAAO,EAAO,aAAa,SAAS,CAAoB,EAAK,IAAwB,KAAK,EAAO,gBAAgB,SAAS,EAAO,EAAO,aAAa,UAAU,CAAqB,EAAG,CAAE,EAAE,CAAC,CAAQ,CAAC,EAAE,IAAM,EAAgBC,MAAiB,EAAkC,CAAC,GAAG,EAAM,MAAM,MAAM,OAAO,SAAS,OAAO,SAAS,EAAE,YAAY,SAAS,OAAO,OAAO,SAAS,SAAS,QAAQ,OAAO,EAA9I,EAAM,MAA4I,CAAC,EAAS,EAAM,KAAK,CAAC,EAAE,OAAoB,EAAK,EAAU,CAAC,IAAI,EAAW,GAAG,EAAM,MAAM,CAAe,CAAC,CAAE,CAAC,CAAE,qBATzqF,IAA4F"}