@gluedigital/responsive-video

0.1.0 • Public • Published

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.

Package Sidebar

Install

npm i @gluedigital/responsive-video

Weekly Downloads

0

Version

0.1.0

License

MIT

Unpacked Size

11.7 kB

Total Files

4

Last publish

Collaborators

  • linuxgunter
  • landesag
  • csar
  • mancontr
  • alex_bf
  • javibt