react-modal-video

React Modal Video Component

Features

Demo

Install

npm

npm install react-modal-video

Usage

import sass file to your project

@import 'node_modules/react-modal-video/scss/modal-video.scss';

change “isOpen” property to open and close the modal-video

import React from 'react'
import ReactDOM from 'react-dom'
import ModalVideo from 'react-modal-video'

class App extends React.Component {

  constructor () {
    super()
    this.state = {
      isOpen: false
    }
    this.openModal = this.openModal.bind(this)
  }

  openModal () {
    this.setState({isOpen: true})
  }

  render () {
    return (
      <div>
        <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='L61p2uyiMSo' />
        <button onClick={this.openModal}>Open</button>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
    document.getElementById('root')
)

Options

properties default
channel 'youtube'
youtube autoplay 1
cc_load_policy 1
color null
controls 1
disablekb 0
enablejsapi 0
end null
fs 1
h1 null
iv_load_policy 1
list null
listType null
loop 0
modestbranding null
origin null
playlist null
playsinline null
rel 0
showinfo 1
start 0
wmode 'transparent'
theme 'dark'
vimeo api false
autopause true
autoplay true
byline true
callback null
color null
height null
loop false
maxheight null
maxwidth null
player_id null
portrait true
title true
width null
xhtml false
ratio '16:9'
allowFullScreen true
animationSpeed 300
classNames modalVideo 'modal-video'
modalVideoClose 'modal-video-close'
modalVideoBody 'modal-video-body'
modalVideoInner 'modal-video-inner'
modalVideoIframeWrap 'modal-video-movie-wrap'
modalVideoCloseBtn 'modal-video-close-btn'
aria openMessage 'You just openned the modal video'
dismissBtnMessage 'Close the modal by clicking here'

Licence

MIT