fix: add missing origin parameter for YouTube iframe API security (#31)

- Pass webViewUrl as origin parameter to resolve iframe API restrictions
- Fix embed access issues when enablejsapi=1 is used

Author: saseungmin

.changeset/true-cobras-appear.md

@@ -0,0 +1,7 @@
+---
+"react-native-youtube-bridge": patch
+---
+
+fix: add missing origin parameter for YouTube iframe API security
+- Pass webViewUrl as origin parameter to resolve iframe API restrictions
+- Fix embed access issues when enablejsapi=1 is used

src/hooks/useYoutubePlayer.ts

@@ -20,7 +20,7 @@ const useYouTubePlayer = (config: YoutubePlayerConfig) => {
     onAutoplayBlocked,
   } = config;
 
-  const { startTime, endTime, autoplay, controls, loop, muted, playsinline, rel } = playerVars;
+  const { startTime, endTime, autoplay, controls, loop, muted, playsinline, rel, origin } = playerVars;
 
   const cleanup = useCallback(() => {
     coreRef.current?.destroy();
@@ -68,6 +68,7 @@ const useYouTubePlayer = (config: YoutubePlayerConfig) => {
             rel,
             startTime,
             endTime,
+            origin,
           },
         });
       } catch (error) {
@@ -80,7 +81,7 @@ const useYouTubePlayer = (config: YoutubePlayerConfig) => {
     };
 
     initialize();
-  }, [videoId, startTime, endTime, autoplay, controls, loop, muted, playsinline, rel, onError]);
+  }, [videoId, startTime, endTime, autoplay, controls, loop, muted, playsinline, rel, origin, onError]);
 
   useEffect(() => {
     if (isReady && videoId && coreRef.current) {

src/modules/YouTubePlayerCore.tsx

@@ -100,6 +100,7 @@ class YouTubePlayerCore {
         end: config.playerVars?.endTime,
         playsinline: config.playerVars?.playsinline ? 1 : 0,
         rel: config.playerVars?.rel ? 1 : 0,
+        origin: config.playerVars?.origin,
         enablejsapi: 1,
       },
       events: {

src/utils/youtube.ts

@@ -11,13 +11,16 @@ export const getYoutubeWebViewUrl = (
     return '';
   }
 
-  const { startTime, autoplay, controls, loop, muted, playsinline, rel, endTime } = playerVars;
+  const baseUrl = webViewBaseUrl || DEFAULT_EXTERNAL_WEB_URL;
 
-  const url = new URL(webViewBaseUrl || DEFAULT_EXTERNAL_WEB_URL);
+  const { startTime, autoplay, controls, loop, muted, playsinline, rel, endTime, origin } = playerVars;
+
+  const url = new URL(baseUrl);
 
   url.searchParams.set('videoId', videoId);
   startTime && url.searchParams.set('startTime', startTime.toString());
   endTime && url.searchParams.set('endTime', endTime.toString());
+  url.searchParams.set('origin', origin || baseUrl);
   url.searchParams.set('autoplay', autoplay ? 'true' : 'false');
   url.searchParams.set('controls', controls ? 'true' : 'false');
   url.searchParams.set('loop', loop ? 'true' : 'false');

web/src/App.tsx

@@ -15,6 +15,7 @@ function App() {
   const muted = urlParams.get('muted') === 'true';
   const playsinline = urlParams.get('playsinline') === 'true';
   const rel = urlParams.get('rel') === 'true';
+  const origin = urlParams.get('origin') ?? '';
 
   const [progressInterval, setProgressInterval] = useState<number>(0);
 
@@ -30,6 +31,7 @@ function App() {
     videoId: youtubeVideoId,
     progressInterval,
     playerVars: {
+      origin,
       controls,
       autoplay,
       muted,