8

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>
Saravana
  • 3,389
  • 4
  • 21
  • 37
  • 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 Mar 17 '20 at 07:39
  • @keikai updated. the example is here https://jsfiddle.net/e6w3rtj1/ – Saravana Mar 17 '20 at 07:43

1 Answers1

7
  • 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"
/>
Oscar Barrett
  • 3,135
  • 31
  • 36
  • 1
    Very nice. But why its blinking with white screen before loading the video? – Saravana Mar 17 '20 at 08:46
  • 1
    I'm facing the same issue, could you solve the white screen before playing the video? – utiq Jan 23 '21 at 17:30
  • 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. – utkarsh-k Feb 16 '21 at 11:23