appleple / React Modal Video
Licence: mit
Accessible React Modal Video Component
Stars: ✭ 105
Programming Languages
javascript
184084 projects - #8 most used programming language
es6
455 projects
Projects that are alternatives of or similar to React Modal Video
Plyr React
A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo
Stars: ✭ 89 (-15.24%)
Mutual labels: vimeo, youtube, accessibility
Richtextview
iOS Text View (UIView) that Properly Displays LaTeX, HTML, Markdown, and YouTube/Vimeo Links
Stars: ✭ 953 (+807.62%)
Mutual labels: vimeo, youtube
Plyr
Plyr Mediaplayer (Video und Audio) im Front- und Backend
Stars: ✭ 30 (-71.43%)
Mutual labels: vimeo, youtube
Kaku
🎧 Kaku is a highly integrated music player supports different online platform like YouTube, SoundCloud, Vimeo and more. Available on Mac, Windows and Linux.
Stars: ✭ 1,028 (+879.05%)
Mutual labels: vimeo, youtube
Podsync
Turn YouTube or Vimeo channels, users, or playlists into podcast feeds
Stars: ✭ 657 (+525.71%)
Mutual labels: vimeo, youtube
Bigpicture
Lightweight JavaScript image / video viewer. Supports Youtube, Vimeo, etc.
Stars: ✭ 722 (+587.62%)
Mutual labels: vimeo, youtube
Yaydl
yet another youtube down loader (Git mirror)
Stars: ✭ 45 (-57.14%)
Mutual labels: vimeo, youtube
Lightgallery.js
Full featured JavaScript image & video gallery. No dependencies
Stars: ✭ 5,168 (+4821.9%)
Mutual labels: vimeo, youtube
Network Avatar Picker
A npm module that returns user's social network avatar. Supported providers: facebook, instagram, twitter, tumblr, vimeo, github, youtube and gmail
Stars: ✭ 74 (-29.52%)
Mutual labels: vimeo, youtube
Lity
Lightweight, accessible and responsive lightbox.
Stars: ✭ 1,051 (+900.95%)
Mutual labels: accessibility, modal
Ac D3
Javascript Library for building Audiovisual Charts in D3
Stars: ✭ 76 (-27.62%)
Mutual labels: vimeo, youtube
Primitives
An open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @modulz.
Stars: ✭ 644 (+513.33%)
Mutual labels: accessibility, ui-components
Superembed.js
Fluid width for YouTube, Vimeo, Vine, VideoPress, DailyMotion, and more embedded videos.
Stars: ✭ 615 (+485.71%)
Mutual labels: vimeo, youtube
Raspberrycast
📺 Transform your Raspberry Pi into a streaming device. Videos can be sent from mobile devices or computers (Chrome extension).
Stars: ✭ 726 (+591.43%)
Mutual labels: vimeo, youtube
React Player
A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
Stars: ✭ 5,931 (+5548.57%)
Mutual labels: vimeo, youtube
Website
Website and documentation for Radix.
Stars: ✭ 45 (-57.14%)
Mutual labels: accessibility, ui-components
React Spectrum
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
Stars: ✭ 5,876 (+5496.19%)
Mutual labels: accessibility, ui-components
Rssbox
📰 I consume the world via RSS feeds, and this is my attempt to keep it that way.
Stars: ✭ 492 (+368.57%)
Mutual labels: vimeo, youtube
Unity Videoplayer Helper
Simple helper for the Video Player in Unity
Stars: ✭ 49 (-53.33%)
Mutual labels: vimeo, youtube
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
- 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 |
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 openned the modal video' |
dismissBtnMessage | 'Close the modal by clicking here' |
Licence
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].