react-youtube-background

A React component that uses a Youtube video as background for a container.

Fork notes: I just forked this repo to make it compatible with gatsby. All credits to the original author.

Installation

$ npm install react-youtube-background

Usage

Import the component

import YoutubeBackground from 'react-youtube-background'

Use the component in you render function

<YoutubeBackground
  videoId={string}                /* default -> null */
  aspectRatio={string}            /* default -> "16:9" */
  overlay={string}                /* default -> null | e.g. "rgba(0,0,0,.4)" */
  className={string}              /* default -> null */
  nocookie={bool}                 /* default -> false | sets host to https:/*www.youtube-nocookie.com to avoid loading Google's cookies */
  playerOptions={object}          /* default -> {}  | https://developers.google.com/youtube/player_parameters*/
  onReady={func}                  /* default -> null | returns event with player object */
  onEnd={func}                    /* default -> null | returns event with player object */
  onPlay={func}                   /* default -> null | returns event with player object */
  onPause={func}                  /* default -> null | returns event with player object */
  onError={func}                  /* default -> null | returns event with player object */
  onStateChange={func}            /* default -> null | returns event with player object */
  onPlaybackRateChange={func}     /* default -> null | returns event with player object */
  onPlaybackQualityChange={func}  /* default -> null | returns event with player object */

>
  {/* YOUR CONTENT */}
</YoutubeBackground>