Search code examples
reactjsreact-player

Prevent to click on you tube video link in react player

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

Solution

  • 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 :')