Easily add background videos to your webapps

npm i -S reactjs-videobg

yarn add reactjs-videobg

This repo uses Commitizen for git commit conventions.

Run yarn commit or npm run commit

You'll be prompted to fill in any required fields and your commit messages will be formatted according to the standards

import React from "react";
import VideoBg from "reactjs-videobg";
import ogg from "./videos/Neon.ogg";
import webm from "./videos/Neon.webm";
import mp4 from "./videos/Neon.mp4";
import poster from "./img/poster.jpg";

<VideoBg poster={poster}>
  <VideoBg.Source src={ogg} type="video/ogg" />
  <VideoBg.Source src={webm} type="video/webm" />
  <VideoBg.Source src={mp4} type="video/mp4" />
</VideoBg>;

sandbox

1. How to show the poster if video has finished.

   This can be implemented with onEnded event handler. You could create an overlay and show it at the end of the video. Please have a look at this example

Videos: Pixabay - gr8effect - neon-terrain-80-retro-abstract Photos: Pixabay - MichaelGaida - nature-landscape-moor-high-fens