The player no longer responds to `play` / `pause`

[Shonn-Li]

Since react-native-youtube-iframe 2.4.0 / 2.4.1 the player no longer responds to play / pause commands issued either through:

• the play prop (<Youtube play={true|false} … />), or
• the imperative methods exposed on the ref (playerRef.current.playVideo() / pauseVideo()).

Seeks (seekTo) and timeline updates still work, so Redux stays in-sync; only starting or pausing playback fails.
Rolling back to 2.3.0 immediately restores the expected behaviour.

[zxl777]

Same here.

[mocml]

same here

[nguoidungg]

Since react-native-youtube-iframe 2.4.0 / 2.4.1 the player no longer responds to play / pause commands issued either through:

• the play prop (<Youtube play={true|false} … />), or
• the imperative methods exposed on the ref (playerRef.current.playVideo() / pauseVideo()).

Seeks (seekTo) and timeline updates still work, so Redux stays in-sync; only starting or pausing playback fails. Rolling back to 2.3.0 immediately restores the expected behaviour.

2.3.0 also not working auto play

[A-MacAulay]

same

[juanjlunar]

Since react-native-youtube-iframe 2.4.0 / 2.4.1 the player no longer responds to play / pause commands issued either through:

• the play prop (<Youtube play={true|false} … />), or
• the imperative methods exposed on the ref (playerRef.current.playVideo() / pauseVideo()).

Seeks (seekTo) and timeline updates still work, so Redux stays in-sync; only starting or pausing playback fails. Rolling back to 2.3.0 immediately restores the expected behaviour.

2.3.0 also not working auto play

What I ended up doing was this

  const playerRef = useRef<YoutubeIframeRef>(null);

  return (
    <YStack>
      <YoutubePlayer
        ref={playerRef}
        height={height}
        width={width}
        play
        videoId={VIDEO_ID}
        onReady={() => {
          playerRef.current?.seekTo(0, true);
        }}
      />
    </YStack>
  );

Running playerRef.current?.seekTo(0, true); in the onReady callback makes the video play as it worked with the play, not a fix, but a workaround.

[tvone]

Since react-native-youtube-iframe 2.4.0 / 2.4.1 the player no longer responds to play / pause commands issued either through:

• the play prop (<Youtube play={true|false} … />), or
• the imperative methods exposed on the ref (playerRef.current.playVideo() / pauseVideo()).

Seeks (seekTo) and timeline updates still work, so Redux stays in-sync; only starting or pausing playback fails. Rolling back to 2.3.0 immediately restores the expected behaviour.

2.3.0 also not working auto play

What I ended up doing was this

const playerRef = useRef(null);

return (

<YoutubePlayer
ref={playerRef}
height={height}
width={width}
play
videoId={VIDEO_ID}
onReady={() => {
playerRef.current?.seekTo(0, true);
}}
/>

);
Running playerRef.current?.seekTo(0, true); in the onReady callback makes the video play as it worked with the play, not a fix, but a workaround.

how to pause video?

[erikd234]

I also have this issue. having to revert back

[rklf]

@LonelyCpp Have you the same issue? If yes, can you have a look?

[ivankdev]

same issue, play prop is useless in last release @LonelyCpp

dirty workaround for now (use patch-package)

diff --git a/node_modules/react-native-youtube-iframe/lib/commonjs/YoutubeIframe.js b/node_modules/react-native-youtube-iframe/lib/commonjs/YoutubeIframe.js
index 0be2dad..efcd06d 100644
--- a/node_modules/react-native-youtube-iframe/lib/commonjs/YoutubeIframe.js
+++ b/node_modules/react-native-youtube-iframe/lib/commonjs/YoutubeIframe.js
@@ -55,6 +55,12 @@ const YoutubeIframe = (props, ref) => {
       meta
     });
     webViewRef.current.postMessage(message);
+    if (eventName === 'pauseVideo') {
+      webViewRef.current.injectJavaScript('try{if(window.player&&player.pauseVideo){player.pauseVideo();}}catch(e){} true;');
+    }
+    if (eventName === 'playVideo') {
+      webViewRef.current.injectJavaScript('try{if(window.player&&player.playVideo){player.playVideo();}}catch(e){} true;');
+    }
   }, [playerReady]);
   (0, _react.useImperativeHandle)(ref, () => ({
     getVideoUrl: () => {
diff --git a/node_modules/react-native-youtube-iframe/src/YoutubeIframe.js b/node_modules/react-native-youtube-iframe/src/YoutubeIframe.js
index 4bbf487..4429b5b 100644
--- a/node_modules/react-native-youtube-iframe/src/YoutubeIframe.js
+++ b/node_modules/react-native-youtube-iframe/src/YoutubeIframe.js
@@ -63,6 +63,17 @@ const YoutubeIframe = (props, ref) => {
 
       const message = JSON.stringify({eventName, meta});
       webViewRef.current.postMessage(message);
+
+      if (eventName === 'pauseVideo') {
+        webViewRef.current.injectJavaScript(
+          'try{if(window.player&&player.pauseVideo){player.pauseVideo();}}catch(e){} true;',
+        )
+      }
+      if (eventName === 'playVideo') {
+        webViewRef.current.injectJavaScript(
+          'try{if(window.player&&player.playVideo){player.playVideo();}}catch(e){} true;',
+        )
+      }
     },
     [playerReady],
   );

[tadeumelembe]

if (eventName === 'pauseVideo') {

•    webViewRef.current.injectJavaScript(
  

•      'try{if(window.player&&player.pauseVideo){player.pauseVideo();}}catch(e){} true;',
  

•    )
  

•  }
  

•  if (eventName === 'playVideo') {
  

•    webViewRef.current.injectJavaScript(
  

•      'try{if(window.player&&player.playVideo){player.playVideo();}}catch(e){} true;',
  

•    )
  

•  }
  

Thanks a lot

[dnwjn]

Just wanted to add that @ivankdev's patch-package solution also works for me.

[hosamalzagh]

play pause issue 2.4.1

[tbenyon]

Going back to 2.3.0 was the only thing that worked for me

[aabcxyz012-debug]

Back to 2.3.0 work for me