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

https://unpkg.com/react-modal-video@latest/test/index.html

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"
				youtube={{ mute: 0, autoplay: 0 }}
				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

• 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