Search code examples
javascriptjqueryhtmlreactjsreact-player

React Player add custom play button and overlay img

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/

picture

<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.sstatic.net/zw9Iz.png"
/>