React-modal-videojs NPM

react-modal-videojs

React VideoJS on Modal Dialog. Based from react-video-js, I tweak it a bit.

JQuery & Fancybox Alternative

This package is react-based (react & videojs only).

If you are looking for react wrapper of jquery + fancybox, try to use react-videojs-fancybox instead.

Demo

Check the Demo

Install

npm install --save react-modal-videojs

Usage

import React, { Component } from 'react'
import ModalVideo from 'react-modal-videojs'

export default class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
      poster: "https://raw.githubusercontent.com/waskito/react-modal-videojs/master/example/public/preview.png",
      show: false
    }
  }

  showModal = () => {
    this.setState({ show: true });
  }

  hideModal = () => {
    this.setState({ show: false });
  }

  render () {
    const { poster, src, show } = this.state;
    return (
      <div>
        <h1>React Modal VideoJS</h1>
        <div className="container">
          <ModalVideo
            id={ (new Date() *1).toString() }
            src={src}
            poster={poster}
            show={show}
            showModal={this.showModal}
            handleClose={this.hideModal}
          />
        </div>
      </div>
    )
  }
}

Props

Modal Props

modalBackdropClass: String, default ''.
modalContentClass: String, default ''.
modalCloseButtonClass: String, default ''.
fade: Boolean, default true.
alt: String, default ''.
noOuterClose: Boolean, default false. (Disable close modal when click on the backdrop)