appleple / Modal Video
Licence: mit
Stars: ✭ 224
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Modal Video
React Modal Video
Accessible React Modal Video Component
Stars: ✭ 105 (-53.12%)
Mutual labels: vimeo, youtube, accessibility
Plyr React
A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo
Stars: ✭ 89 (-60.27%)
Mutual labels: vimeo, youtube, accessibility
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 (+358.93%)
Mutual labels: vimeo, youtube
Unity Videoplayer Helper
Simple helper for the Video Player in Unity
Stars: ✭ 49 (-78.12%)
Mutual labels: vimeo, youtube
Ac D3
Javascript Library for building Audiovisual Charts in D3
Stars: ✭ 76 (-66.07%)
Mutual labels: vimeo, youtube
Dom Slider
Plain JavaScript version of jQuery's slideToggle(), slideDown(), & slideUp(), but does not use display: none.
Stars: ✭ 44 (-80.36%)
Mutual labels: accessibility, jquery
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 (-66.96%)
Mutual labels: vimeo, youtube
Bigpicture
Lightweight JavaScript image / video viewer. Supports Youtube, Vimeo, etc.
Stars: ✭ 722 (+222.32%)
Mutual labels: vimeo, youtube
Socialcounters
jQuery/PHP - Collection of Social Media APIs that display number of your social media fans. Facebook Likes, Twitter Followers, Instagram Followers, YouTube Subscribers, etc..
Stars: ✭ 104 (-53.57%)
Mutual labels: vimeo, youtube
Vime
Customizable, extensible, accessible and framework agnostic media player. Modern alternative to Video.js and Plyr. Supports HTML5, HLS, Dash, YouTube, Vimeo, Dailymotion...
Stars: ✭ 1,928 (+760.71%)
Mutual labels: vimeo, youtube
Plyr
Plyr Mediaplayer (Video und Audio) im Front- und Backend
Stars: ✭ 30 (-86.61%)
Mutual labels: vimeo, youtube
Richtextview
iOS Text View (UIView) that Properly Displays LaTeX, HTML, Markdown, and YouTube/Vimeo Links
Stars: ✭ 953 (+325.45%)
Mutual labels: vimeo, youtube
Yaydl
yet another youtube down loader (Git mirror)
Stars: ✭ 45 (-79.91%)
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 (+224.11%)
Mutual labels: vimeo, youtube
On Screen Keyboard
A jQuery plug-in which provides users with a fluid-width on-screen keyboard.
Stars: ✭ 63 (-71.87%)
Mutual labels: accessibility, jquery
Superembed.js
Fluid width for YouTube, Vimeo, Vine, VideoPress, DailyMotion, and more embedded videos.
Stars: ✭ 615 (+174.55%)
Mutual labels: vimeo, youtube
Podsync
Turn YouTube or Vimeo channels, users, or playlists into podcast feeds
Stars: ✭ 657 (+193.3%)
Mutual labels: vimeo, youtube
Modal Video
Modal Video Library
Features
- Not affected by dom structure.
- Beautiful transition
- Accessible for keyboard navigation and screen readers.
- Rich options for youtube API and Vimeo API
Installation
via npm
npm install modal-video --save
or yarn
yarn add modal-video
Short Sample
Basic
<button class="js-modal-btn" data-video-id="XJS_UYNq4No">Open Video</button>
new ModalVideo('.js-modal-video');
Vimeo
<button class="js-modal-btn" data-video-id="202177974">Open Vimeo</button>
// import ModalVideo from 'modal-video';
new ModalVideo('.js-modal-video', {channel: 'vimeo'});
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 | |
| mute | 0 | |
| origin | null | |
| playlist | null | |
| playsinline | null | |
| rel | 0 | |
| showinfo | 1 | |
| start | 0 | |
| wmode | 'transparent' | |
| theme | 'dark' | |
| nocookie | false | |
| vimeo | api | false |
| autopause | true | |
| autoplay | true | |
| byline | true | |
| callback | null | |
| color | null | |
| controls | true | |
| height | null | |
| loop | false | |
| maxheight | null | |
| maxwidth | null | |
| player_id | null | |
| portrait | true | |
| title | true | |
| width | null | |
| xhtml | false | |
| 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' | |
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].