Open YouTube video on a browser or YouTube app

[y-maslouskaya]

Hello, is there a way to make the YouTube button clickable that a user can open a video on a browser or Youtube app? Thank you

[LonelyCpp]

Isn't this already clickable? 🤔 What behavior are you seeing on tap?

[y-maslouskaya]

Unfortunately, not. I am seeing a way to click somewhere inside of YouTube player (I suppose that it should be the YouTube bottom which is between the gear and expand buttons), and open a Youtube video on a browser or Youtube app if a user has it installed on the phone. Here is a piece of code that I am using for YoutubePlayer. <YoutubePlayer height={193} videoId={item.LinkVideoId} /> Do I need to add some more props to make it work in a way I want? Thank you!

[stevan-borus]

Same problem. But only on ios. Can't click on the text of the video or the youtube button. I can only click on the profile button top left. And then it opens that profile on youtube. On android devices everything works correctly.

[jklimcak]

+1 please

[gwijaya94]

Hi @LonelyCpp, any update regarding this issue?

Let me show you some example that i have : https://user-images.githubusercontent.com/65438712/198843321-e65cb061-86e4-4c56-ab01-cd45623502d7.mp4

first click video (upper side) using react-native-youtube, and when click the Youtube logo, it redirect to browser/app if available. on the second one using react-native-youtube-iframe, and nothing happen when click the Youtube logo.

Maybe need to add some function in it? Mind to take a look on this case. Not a major issue, but it's behavior a little off.

Thankyou.

[arrygoo]

@LonelyCpp I was wondering if there are any updates on this? Or if you'd be open to a PR that fixes this

[prateek-somaiya]

+1 same problem, is this repo still alive?

[Yupeng-li]

Hey, I submitted a pull request to fix this. If you need the fix before it's merged, you can pass your own onShouldStartLoadWithRequest to the YouTubeIframe component via webViewProps.

Note: you don't have to use baseUrlOverride, but then you need to tweak the last line to use the default url. https://github.com/LonelyCpp/react-native-youtube-iframe/blob/master/src/constants.js#L42

 <YoutubeIframe
      height={300}
      videoId={videoId}
      baseUrlOverride={YOUTUBE_IFRAME_SCRIPT_URL}
      webViewProps={{
          onShouldStartLoadWithRequest: (event) => {
              const url = event.mainDocumentURL || event.url
              if (Platform.OS === 'ios') {
                  const iosFirstLoad = url === 'about:blank'
                  if (iosFirstLoad) {
                      return true
                  }

                  const isYouTubeLink = url.startsWith('https://www.youtube.com/')
                  if (isYouTubeLink) {
                      Linking.openURL(url).catch((error) => {
                          // handle error
                      })
                      return false
                  }
              }
              return url.startsWith(YOUTUBE_IFRAME_SCRIPT_URL)
          },
      }}
  />

[LonelyCpp]

should be fixed thanks to @Yupeng-li in :)

#300