I'm using ReactPlayer plugin for my react website. I want to add custom play button and overlay image over the vimeo video follow the below image.

When I click play button overlay image and button need to hide and video start play.

Player Link here: /

<section className="vm-video">
    <div className="play-btn" onClick={this.handlePlayPause}>{playing ? 'Pause' : 'Play'}>
        <div className="arrow"></div>
    </div>
    <div className="video-preview">
        <img src={videopreviewpic} className="img-fluid" alt="video-preview-img" />
    </div>
    <div className="vc-container player-wrapper">
        <ReactPlayer onPlay={this.handlePlay} url='' className="react-player" controls width='100%' height='100%' />
    </div>
</section>

I'm using ReactPlayer plugin for my react website. I want to add custom play button and overlay image over the vimeo video follow the below image.

When I click play button overlay image and button need to hide and video start play.

Player Link here: https://jsfiddle/e6w3rtj1/

<section className="vm-video">
    <div className="play-btn" onClick={this.handlePlayPause}>{playing ? 'Pause' : 'Play'}>
        <div className="arrow"></div>
    </div>
    <div className="video-preview">
        <img src={videopreviewpic} className="img-fluid" alt="video-preview-img" />
    </div>
    <div className="vc-container player-wrapper">
        <ReactPlayer onPlay={this.handlePlay} url='https://vimeo./361808343' className="react-player" controls width='100%' height='100%' />
    </div>
</section>

• javascript
• jquery
• html
• reactjs
• react-player

• Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. By now I can't see any problem description in your post. Could you make it specific? – keikai Commented Mar 17, 2020 at 7:39
• @keikai updated. the example is here jsfiddle/e6w3rtj1 – Saravana Commented Mar 17, 2020 at 7:43

1 Answer 1

• Use the playIcon prop for the play button. This can be a JSX element.
• Pass the poster image URL to light prop.

Example

<ReactPlayer
  url="https://vimeo./243556536"
  width="100%"
  height="500px"
  playing
  playIcon={<button>Play</button>}
  light="https://i.sstatic/zw9Iz.png"
/>