Easily Add Background Videos to React Web Apps

Easily Add Background Videos to React Web Apps

reactjs-videobg .Easily add background videos to your webapps

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

Download Details:

Author: SmashTapsOS

Demo: https://qdync.csb.app/

Source Code: https://github.com/SmashTapsOS/reactjs-videobg

react reactjs javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

What is ReactJS? | ReactJS Basics | Learn ReactJS | React for Beginners | ReactJS Training

This Edureka video on "What is ReactJS ?" will help you understand the fundamentals of ReactJS and help you in building a strong foundation in React by understanding the advantages of ReactJS along with its features and major aspects.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

Routing in React without React-Router

I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.