# 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](https://unpkg.com/react-modal-video@latest/test/index.html) ## Install ### npm ```sh npm install react-modal-video ``` ## Usage import sass file to your project ```scss @import 'node_modules/react-modal-video/scss/modal-video.scss'; ``` ### Functional Implementation with Hooks ```jsx import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import ModalVideo from 'react-modal-video'; const App = () => { const [isOpen, setOpen] = useState(false); return ( setOpen(false)} /> ); }; ReactDOM.render(, document.getElementById('root')); ``` ### Class Implementation change "isOpen" property to open and close the modal-video ```jsx 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 ( this.setState({ isOpen: false })} /> ); } } ReactDOM.render(, 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
youku	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'
aria	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 `` in HTML file. ## Licence [MIT](https://github.com/appleple/modal-video.js/blob/master/LICENSE)

	Stars	Issues	Version	Updated	Created
react-awesome-modal	95	14	2.0.5	6 years ago	9 years ago
react-modal-video	174	31	2.0.1	a year ago	7 years ago
react-responsive-modal			6.4.2	a year ago	8 years ago
rodal	910	7	2.1.0	10 months ago	9 years ago

react-awesome-modal vs react-modal-video vs react-responsive-modal vs rodal

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past