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>
playIcon
prop for the play button. This can be a JSX element.light
prop.<ReactPlayer
url="https://vimeo.com/243556536"
width="100%"
height="500px"
playing
playIcon={<button>Play</button>}
light="https://i.stack.imgur.com/zw9Iz.png"
/>