SmashTapsOS / reactjs-videobg

Easily add background videos to react web apps
MIT License
50 stars 12 forks source link
background-video react-background-video react-bg-video react-video react-video-background react-video-bg reactjs-background-video reactjs-videobg

Build Status Coverage Status Commitizen friendly npm bundle size License: MIT code style: prettier

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>;

sandbox

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

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