reactjs-videobg
Easily add background videos to your webapps
DEMO
Installation
npm
npm i -S reactjs-videobg
yarn
yarn add reactjs-videobg
Development
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
Usage
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>;FAQ
-
How to show the poster if video has finished.
This can be implemented with
onEndedevent handler. You could create an overlay and show it at the end of the video. Please have a look at this example
API
<VideoBg />
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| wrapperClass | String |
none | no | className name for wrapper element. |
| videoClass | String |
none | no | className name for video element. |
| loop | Boolean |
true |
no | Video will start over again. |
| autoPlay | Boolean |
true |
no | Video will start playing as soon as it is ready. |
| poster | String |
none | no | The image to be shown while the videos are downloading. |
| muted | Boolean |
true |
no | Should audio of the video be muted? |
| onEnded | Function |
none | no | Triggers on video end |
| onPlay | Function |
none | no | Triggeres on play |
| onPlaying | function |
none | no | Triggers on each time the video loops |
<VideoBg.Source />
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| src | String |
none | yes | static file or video file source |
| type | String |
none | yes | video type |
Resources
Videos: Pixabay - gr8effect - neon-terrain-80-retro-abstract Photos: Pixabay - MichaelGaida - nature-landscape-moor-high-fens