next-modal-video

next-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

Install

npm

npm install next-modal-video

Usage

import sass file to your project

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

Functional Implementation with Hooks

import React,{useState} from 'react'
import ReactDOM from 'react-dom'
import ModalVideo from 'next-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 'next-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

• About YouTube options, please refer to https://developers.google.com/youtube/player_parameters?hl=en
• About Vimeo options, please refer to https://developer.vimeo.com/apis/oembed

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]