diff --git a/.changeset/true-cobras-appear.md b/.changeset/true-cobras-appear.md new file mode 100644 index 0000000..1ea1f9c --- /dev/null +++ b/.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 diff --git a/src/hooks/useYoutubePlayer.ts b/src/hooks/useYoutubePlayer.ts index 7a5038b..fbc3d51 100644 --- a/src/hooks/useYoutubePlayer.ts +++ b/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) { diff --git a/src/modules/YouTubePlayerCore.tsx b/src/modules/YouTubePlayerCore.tsx index f82c45b..a99b7b3 100644 --- a/src/modules/YouTubePlayerCore.tsx +++ b/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: { diff --git a/src/utils/youtube.ts b/src/utils/youtube.ts index e388093..f389ce0 100644 --- a/src/utils/youtube.ts +++ b/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'); diff --git a/web/src/App.tsx b/web/src/App.tsx index fed33bf..b82b6a2 100644 --- a/web/src/App.tsx +++ b/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(0); @@ -30,6 +31,7 @@ function App() { videoId: youtubeVideoId, progressInterval, playerVars: { + origin, controls, autoplay, muted,