React Modal Video Component
https://unpkg.com/react-modal-video@latest/test/index.html
npm install react-modal-video
import sass file to your project
@import 'node_modules/react-modal-video/scss/modal-video.scss';
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'));
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'));
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' |
enablejsapi
property to 1
.<script src="https://www.youtube.com/iframe_api"></script>
in HTML file.