Video in scrollview

[ArturIgnatov]

Describe the bug If the video is in the scrollview when scrolling, if you hit the video and it occupies almost the entire width, this window appears.

To Reproduce render multiple videos in scrollview

Expected behavior When scrolling, the player should not respond in any way.

Screenshots

Smartphone:

• Device: Redmi note 8pro
• OS: Android 10
• react-native-youtube-iframe: 2.1.0
• react-native-webview : 10.10.2

Other information: The library component is wrapped in a view. Tried changing pointerEvent when scrolling. Nothing comes out. This is very inconvenient to use. In normal mode, it works well without the scrollview.

[LonelyCpp]

Seems like a bug in with react-native's scrollview here, not sure what I could do to solve this.

As a workaround, I would suggest not loading up multiple players in a scrollview. Instead, just

• show <Image /> elements with the video thumbnail. (doc to get thumbnail url)
• when a user taps on a thumbnail (onPress), replace the <Image /> element with the YouTube player.

[ArturIgnatov]

Seems like a bug in with react-native's scrollview here, not sure what I could do to solve this.

As a workaround, I would suggest not loading up multiple players in a scrollview. Instead, just

show <Image /> elements with the video thumbnail. (doc to get thumbnail url) when a user taps on a thumbnail (onPress), replace the element with the YouTube player.

Yes, it is possible. But the same behavior occurs when the video is paused. What to do in this case?

[erickgtzh]

Seems like a bug in with react-native's scrollview here, not sure what I could do to solve this.

As a workaround, I would suggest not loading up multiple players in a scrollview. Instead, just

show elements with the video thumbnail. (doc to get thumbnail url) when a user taps on a thumbnail (onPress), replace the element with the YouTube player.

Yes, it is possible. But the same behavior occurs when the video is paused. What to do in this case?

Did you find something to fix this issue?

[lander854]

this will fix this issue:

`export const YoutubePlayerScreen = ({ videoId }) => { const [playing, setPlaying] = useState(false);

const togglePlaying = useCallback(() => {
    setPlaying((prev) => !prev);
}, []);

return (
    <Pressable
        onPress={() => {
            togglePlaying();
        }}
    >
        <View
            pointerEvents={playing ? undefined : 'none'}
            style={{ width: '100%', height: 300 }}
        >
            <YoutubePlayer
                height={400}
                play={playing}
                videoId={videoId}
                webViewProps={{
                    androidLayerType: 'hardware',
                }}
            />
        </View>
    </Pressable>
);

};`

[josegoval]

this will fix this issue:

`export const YoutubePlayerScreen = ({ videoId }) => { const [playing, setPlaying] = useState(false);

const togglePlaying = useCallback(() => {
    setPlaying((prev) => !prev);
}, []);

return (
    <Pressable
        onPress={() => {
            togglePlaying();
        }}
    >
        <View
            pointerEvents={playing ? undefined : 'none'}
            style={{ width: '100%', height: 300 }}
        >
            <YoutubePlayer
                height={400}
                play={playing}
                videoId={videoId}
                webViewProps={{
                    androidLayerType: 'hardware',
                }}
            />
        </View>
    </Pressable>
);

};`

This should be abstracted in a sub-component of this library, though some controls get disturbed.

[josegiufrida]

@lander854 solution's works fine!

But it does not allow to use other buttons correctly (volume, full screen mode) because when pressing them the pressable activates and pauses the video. Or also, sometimes, when trying to pause the video, it plays again.

I solved it doing (it works perfectly on Scrollview or Flatlist):

const [playing, setPlaying] = useState(false);

return(
  <Pressable
	  onPress={() => {
              if (!playing) {
                  setPlaying(true);
              }
	  }}>
	  <View pointerEvents={playing ? undefined : 'none'}>
              <YoutubePlayer
	          height={400}
	          play={playing}
	          videoId={videoId}
	          webViewProps={{
		      androidLayerType: 'hardware',
	          }}
	          onChangeState={event => {
                      if (event === 'paused') {
                          setPlaying(false);
                      }
	          }}
              />
	  </View>
  </Pressable>
);

Thanks @lander854! I was looking for a long time for a solution to this problem.

[DonRyu]

@lander854 solution's works fine!

But it does not allow to use other buttons correctly (volume, full screen mode) because when pressing them the pressable activates and pauses the video. Or also, sometimes, when trying to pause the video, it plays again.

I solved it doing (it works perfectly on Scrollview or Flatlist):

const [playing, setPlaying] = useState(false);

return(
  <Pressable
	  onPress={() => {
              if (!playing) {
                  setPlaying(true);
              }
	  }}>
	  <View pointerEvents={playing ? undefined : 'none'}>
              <YoutubePlayer
	          height={400}
	          play={playing}
	          videoId={videoId}
	          webViewProps={{
		      androidLayerType: 'hardware',
	          }}
	          onChangeState={event => {
                      if (event === 'paused') {
                          setPlaying(false);
                      }
	          }}
              />
	  </View>
  </Pressable>
);

Thanks @lander854! I was looking for a long time for a solution to this problem.

When I show more than one video, the video start and paused together

[zarin-maruf]

@lander854 solution's works fine!

But it does not allow to use other buttons correctly (volume, full screen mode) because when pressing them the pressable activates and pauses the video. Or also, sometimes, when trying to pause the video, it plays again.

I solved it doing (it works perfectly on Scrollview or Flatlist):

const [playing, setPlaying] = useState(false);

return(
  <Pressable
	  onPress={() => {
              if (!playing) {
                  setPlaying(true);
              }
	  }}>
	  <View pointerEvents={playing ? undefined : 'none'}>
              <YoutubePlayer
	          height={400}
	          play={playing}
	          videoId={videoId}
	          webViewProps={{
		      androidLayerType: 'hardware',
	          }}
	          onChangeState={event => {
                      if (event === 'paused') {
                          setPlaying(false);
                      }
	          }}
              />
	  </View>
  </Pressable>
);

Thanks @lander854! I was looking for a long time for a solution to this problem.

thanks for your answer, this doesn't work for me, it always show the copy url dialog, Did you find new solution for this?