@gluedigital/responsive-video

React component that picks a video source based on responsive rules

Stats

StarsIssuesVersionUpdatedCreatedSize
@gluedigital/responsive-video
0.1.03 years ago3 years agoMinified + gzip package size for @gluedigital/responsive-video in KB

Readme

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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.