@gluedigital/responsive-video v0.1.0

ResponsiveVideo

React component that picks a video source based on responsive rules

Usage

To install it:

npm install --save @gluedigital/responsive-video

To use it:

import ResponsiveVideo, { ResponsiveSource } from '@gluedigital/responsive-video'

// ...

<ResponsiveVideo
  className="video"
  id="video-hero"
  ref="video"
  autoPlay muted playsInline loop>
  <ResponsiveSource
    src='/demo-mobile.mp4'
    type="video/mp4; codecs=avc1.4D401E"
    maxDeviceWidth={768} />
  <ResponsiveSource
    src='/demo-desktop.mp4'
    type="video/mp4; codecs=avc1.4D401E" />
</ResponsiveVideo>

Options

The following props can be used:

ResponsiveVideo

ResponsiveSource

Developing

This package uses nwb for the build. Take a look at their documentation for more info.

TL;DR: after installing nwb, just do npm start to open the dev environment.