Ovidlay NPM | npm.io

ovidlay

Fully customizable YouTube video overlay for React

Usage

To use ovidlay all you need is the videoId of the YouTube video you want to add to your page:

import Ovidlay from "ovidlay"

...

<Ovidlay 
  videoId="g1iC1h8Nt68" 
  containerClassName="player"
  playButtonColor="#162363"
  sliderPrimaryColor="#162363"
  sliderSecondaryColor="#ffffff"
>
  <div style={{position: 'absolute', top: "25%", width: "100%"}}>
    <h1 style={{textAlign: "center"}}>
      Sample Text
    </h1>
  </div>
</Ovidlay>

Props

Name	Type	Required	Description
videoId	string	Y	YouTube video id to be used by the video player
containerClassName	string	N	Class Name to be applied to the component (components default styling uses height & width 100%)
playButtonColor	string	N	Background color for the play button, defaults to black (#000000)
sliderPrimaryColor	string	N	Color of the progress and volume sliders in the overlay controls, defaults to red (#ff0000)
sliderSecondaryColor	string	N	Color of progress and volume slider backgrounds, defaults to white (#ffffff) NOTE: 50% opacity is applied to this color