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

| Name | Type | Description | |------|------|-------------| | children | [ResponsiveSource] | One or more ResponsiveSource elements | | poster | string | Default image |

ResponsiveSource

| Name | Type | Description | |------|------|-------------| | maxDeviceWidth | number | Maximum device width | | minDeviceWidth | number | Minimum device width | | maxWidth | number | Maximum window width | | maxHeight | number | Maximum window height | | poster | string | Default image |

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.