VideoViewer.jsx

import { createRef, useState } from 'react';

export default ({src}) => {
  const [showPrompt, setShowPrompt] = useState(true)
  const videoRef = createRef()

  const playVideo = () => {
    setShowPrompt(false)
    videoRef.current.play()
  }

  const pauseVideo = () => {
    setShowPrompt(true)
    videoRef.current.pause()
  }

  return (
    <div className="container">
      {showPrompt && (
        <div className="play-prompt" onClick={playVideo}>
          <p>Click to play.</p>
        </div>
      )}

      <video loop onClick={pauseVideo} ref={videoRef}>
        <source
          src={src}
          type="video/mp4" />
      </video>

      <style jsx>{`
        .container {
          position: relative;
        }

        video {
          max-width: 100%;
        }

        .play-prompt {
          align-items: center;
          background: rgba(250, 250, 250, 0.8);
          border: 1px solid #ddd;
          box-sizing: border-box;
          cursor: pointer;
          display: flex;
          height: 100%;
          justify-content: center;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
          z-index: 1;
        }
      `}</style>
    </div>
  )
}