Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hello-motto/videos-modal
A little JS plugin for videos embed working with tarteaucitronjs
https://github.com/hello-motto/videos-modal
dailymotion fancybox gdpr lightbox modal no-jquery rgpd tarteaucitron tarteaucitronjs videos vimeo youtube
Last synced: 6 days ago
JSON representation
A little JS plugin for videos embed working with tarteaucitronjs
- Host: GitHub
- URL: https://github.com/hello-motto/videos-modal
- Owner: hello-motto
- License: mit
- Created: 2019-07-03T14:08:40.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-11T17:37:30.000Z (4 months ago)
- Last Synced: 2024-09-19T15:18:45.484Z (14 days ago)
- Topics: dailymotion, fancybox, gdpr, lightbox, modal, no-jquery, rgpd, tarteaucitron, tarteaucitronjs, videos, vimeo, youtube
- Language: JavaScript
- Homepage: https://videos-modal.hello-motto.com
- Size: 568 KB
- Stars: 3
- Watchers: 0
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Videos Modal
[](https://www.npmjs.com/package/hello-motto-videos-modal)
A little JS plugin for videos embed working with tarteaucitronjs.
[](https://www.npmjs.org/package/hello-motto-videos-modal)
## Installation
### Node.js JavaScript
You may install the NPM package `hello-motto-videos-modal`. When installed you can add it in your resources.
```bash
$ npm install hello-motto-videos-modal
```
### Direct download
Instead of using NPM, it is possible to download [the last stable version here](https://github.com/hello-motto/videos-modal/archive/master.zip) and use the files that you need.
### HTML
Include `videos-modal.css` or `videos-modal.min.css` stylesheet :
```html
```
Include `videos-modal.js` or `videos-modal.min.js` script :
```html
```
## Usage
This is a script that show videos (from youtube or others) into a modal. It's working with tarteaucitron and videos will be blocked if the provider (Youtube for example) is not allowed by the user.
Examples below can be found in the [example page](https://videos-modal.hello-motto.com//multi-providers.html)
and in the [example without tarteaucitron page](https://videos-modal.hello-motto.com/without-tarteaucitron.html).
### Create JavaScript Object
To instanciate the object it is possible to pass an optional JSON object as argument. This object is optional because
all the parameters have default values and most of them can be overwritten by each link.
Here are the options with the by default values.
Only options beginning with `video_` can be overwritten by link attributes.
```js
var videosModal = new VideosModal({
closeOnClick: true,
closeWithEscape: true,
closeByIcon: true,
closeIcon: '', // Default icon VideosModal.getDefaultCloseIcon(), this needs that closeByIcon is set as true
loading: true,
loaderIcon: '', // Default icon VideosModal().getDefaultLoaderIcon(), this needs that loading is set as true
navigate: true,
leftArrow: '', // Default icon VideosModal.getDefaultLeftArrow(), this needs that navigate is set as true
rightArrow: '', // Default icon VideosModal.getDefaultRightArrow(), this needs that navigate is set as true
onlyLandscape: true, // if true, on mobile devices it should turn the video (it's adding a only-landscape class)
tarteAuCitron: null, // if tarteaucitron is used, put the variable into it.
links: '.videos-modal-link', // It is possible to set several selectors as a string.
videos_id: null,
videos_provider: 'media', // Default provider is direct media
videos_width: null,
videos_height: null,
videos_autoplay: 0,
videos_rel: 0,
videos_controls: 0,
videos_showinfo: 0,
videos_allowfullscreen: 0,
videos_title: true,
videos_byline: true,
videos_portrait: true,
videos_loop: false
});
```
### Create HTML container for the modal (optional)
This is an optional container. If this not exists, it will be inserted at the end of the body.
```html
```
### Add links for the embed videos
The `href` attribute won't be used (but is important if javascript is no enabled, or the user is using Internet Explorer. So pray for her/him). The `data-videos-modal-*` attributes overwrite the by default parameters.
```html
First link
```
To add some video media, don't use `data-videos-modal-id` but `data-videos-modal-` + format of the video. For example `data-videos-modal-ogg` for ogg format videos.
```html
Scrabble
```
### Add or remove links after the page is loaded
If there are new links or links are removed after the page is loaded (ajax or modified DOM), you can easily reset the script and the links list.
```js
videosModal.reset();
```
## Compatibility
This script should work with all modern browsers (so forget IE). If you see compatibility problems please contact me.
## Available providers
- Dailymotion
- Vimeo
- Youtube
- Youtube Playlist