1

I am using ReactPlayer https://www.npmjs.com/package/react-player in my react project and it is working but issue is when I put any youtube video url then all youtube video series are displaying bottome side of player and if whenever I click on that youtube video title then it is redirecting to youtube site.

<ReactPlayer
 onProgress={() => this.progress(this.state.vid[0].vid.videotext)}
 onEnded={(e)=>this.onEnded(e,this.state.vid[0]._id)}  url={this.state.vid[0].videourl} controls={true} playing={false} />}

So I just want to disable that all thing, can it possible using any way ? Your help would be highly appreciated

Thanks in Advavce

K.S
  • 443
  • 10
  • 29

2 Answers2

1

Youtube video was open in an iframe (you will see it by browser inspect), and you can't disable features that was place inside iframe (for security reason).

So if you want to prevent user click to youtube link, you can create an transparent overlay that has z-index larger than your video player, and then user can't click youtube link. Of course, don't overlay play/pause button :')

Hung Nguyen
  • 1,026
  • 11
  • 18
  • how can I create create an transparent overlay, can you give me any example – K.S Sep 17 '19 at 06:38
  • 2
    hi, I have reproduced it on stackblitz here is the link can you have a look on it https://stackblitz.com/edit/react-r6j28k – K.S Sep 17 '19 at 06:43
  • https://stackblitz.com/edit/react-rxwrzt, i added example, now user can't click top toolbars. – Hung Nguyen Sep 17 '19 at 07:02
  • Thanks it worked for me I am gonna accept your ans but can just tell me how can I disable you tube video suggestion as well, when I pause video or finihsed then it show me more video of that series – K.S Sep 17 '19 at 07:11
  • It same with example above, you must create other overlay that placed exactly same position with youtube suggestion. I used https://github.com/sampotts/plyr and they also do this way :') – Hung Nguyen Sep 17 '19 at 07:17
  • additional, you should only show your overlay when user clicked pause button to avoid annoying user. Using https://github.com/CookPete/react-player#callback-props – Hung Nguyen Sep 17 '19 at 07:24
  • I have gone through your example and this what I have made it can you have look on it https://stackblitz.com/edit/react-r6j28k – K.S Sep 17 '19 at 08:05
0

Try event.preventDefault(); event.stoppropagation(); in click handler. if not worked post post your code snippet.

Pushpak
  • 86
  • 2
  • 9