https://github.com/samAbeywickrama/reactjs-videobg
Easily add background videos to react web apps
https://github.com/samAbeywickrama/reactjs-videobg
background-video react-background-video react-bg-video react-video react-video-background react-video-bg reactjs-background-video reactjs-videobg
Last synced: 4 months ago
JSON representation
Easily add background videos to react web apps
- Host: GitHub
- URL: https://github.com/samAbeywickrama/reactjs-videobg
- Owner: SmashTapsOS
- License: mit
- Created: 2019-08-05T18:23:12.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T06:22:07.000Z (over 2 years ago)
- Last Synced: 2025-02-02T08:12:17.017Z (4 months ago)
- Topics: background-video, react-background-video, react-bg-video, react-video, react-video-background, react-video-bg, reactjs-background-video, reactjs-videobg
- Language: JavaScript
- Size: 8.37 MB
- Stars: 50
- Watchers: 3
- Forks: 12
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/samAbeywickrama/reactjs-videobg)
[](https://coveralls.io/github/samAbeywickrama/react-video-bg?branch=master)
[](http://commitizen.github.io/cz-cli/)
[](https://github.com/prettier/prettier)
# reactjs-videobg
Easily add background videos to your webapps
### [**DEMO**](https://qdync.csb.app/)
## 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
```jsx
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";
;
```
[**sandbox**](https://codesandbox.io/s/sharp-poitras-qdync)
## FAQ
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**](https://github.com/samAbeywickrama/reactjs-videobg/blob/master/examples/cra/src/showPosterOnEnd)
## API
### ``
| 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 |
### ``
| 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](https://pixabay.com/videos/neon-terrain-80-retro-abstract-21368/)
Photos: [Pixabay - MichaelGaida - nature-landscape-moor-high-fens](https://pixabay.com/photos/nature-landscape-moor-high-fens-4356963/)