React Player add custom play button and overlay img

Question

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.net/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.com/361808343' className="react-player" controls width='100%' height='100%' />
    </div>
</section>

Solution

• 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.com/243556536"
  width="100%"
  height="500px"
  playing
  playIcon={<button>Play</button>}
  light="https://i.stack.imgur.com/zw9Iz.png"
/>

Comments

[Saravana]

Very nice. But why its blinking with white screen before loading the video?

[utiq]

I'm facing the same issue, could you solve the white screen before playing the video?

[utkarsh-k]

I am facing a few moments of white screen before video actually loads(after clicking on the custom thumbnail set by the light prop). I also haven't found any solution to this as of now. It's happening as soon as the light prop is passed. So for example if you remove 'playIcon' prop same white screen will appear on clicking of thumbnail.