Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-modal-videojs with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactModalVideojs = require("react-modal-videojs")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-modal-videojs v0.3.0

React VideoJS on Modal Dialog


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

NPM JavaScript Style Guide

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.


Check the Demo


npm install --save react-modal-videojs


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

export default class App extends Component {
    this.state = {
      src: "",
      poster: "",
      show: false

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

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

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


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)

VideoJS Props

  • id: (required) String.
  • source: (required) String.
  • sourceHD: String, default ''.
  • poster: String, default null.
  • responsive: Boolean, default false.
  • fluid: Boolean, default true.
  • fill: Boolean, default true.
  • skin: String, default default.
  • autoplay: Boolean, default true.
  • bigPlayButton: Boolean, default false (Because autoplay is true).
  • customSkinClass: String, default ''.
  • height: Number, default null.
  • width: Number, default null.
  • loop: Boolean, default false.
  • onReady: Functon, callback(videoJsPlayer).
  • resize: Boolean, default true.
  • options: Boolean, default
  • onEnded: Function, callback(videoJsPlayer).
  • onPlay: Function, callback(videoJsPlayer).
  • onPause: Function, callback(videoJsPlayer).
  • debounce: Number, default 300.
  • bigPlayButtonCentered: Boolean, default false.


MIT © waskito


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free