/react-modal-video

Accessible React Modal Video Component

Primary LanguageJavaScriptMIT LicenseMIT

react-modal-video

React Modal Video Component

Features

  • Not affected by dom structure.
  • Beautiful transition
  • Accessible for keyboard navigation and screen readers.
  • Rich options for youtube API and Vimeo API

Demo

http://rawgit.com/appleple/react-modal-video/master/test/

Install

npm

npm install react-modal-video

Usage

import sass file to your project

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

Functional Implementation with Hooks

import React,{useState} from 'react'
import ReactDOM from 'react-dom'
import ModalVideo from 'react-modal-video'

const App = () => {

	const [isOpen, setOpen] = useState(false)

	return (
		<React.Fragment>
			<ModalVideo channel='youtube' autoplay isOpen={isOpen} videoId="L61p2uyiMSo" onClose={() => setOpen(false)} />

			<button className="btn-primary" onClick={()=> setOpen(true)}>VIEW DEMO</button>
		</React.Fragment>
	)
}

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

Class Implementation

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 (
      <React.Fragment>
        <ModalVideo channel='youtube' isOpen={this.state.isOpen} videoId='L61p2uyiMSo' onClose={() => this.setState({isOpen: false})} />
        <button onClick={this.openModal}>Open</button>
      </React.Fragment>
    )
  }
}

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'
mute 0
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
youku autoplay 1
show_related 0
custom url MP4 URL / iframe URL
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 opened the modal video'
dismissBtnMessage 'Close the modal by clicking here'

FAQ

How to track YouTube videos playing in modal-video by GA4?

  1. Enable JS API. Turn enablejsapi property to 1.
  2. Load YouTube Iframe API. Add <script src="https://www.youtube.com/iframe_api"></script> in HTML file.

Licence

MIT