Skip to content

Commit

Permalink
Merge pull request #7 from hello-motto/dev
Browse files Browse the repository at this point in the history
Dev
  • Loading branch information
hello-motto authored Jul 15, 2019
2 parents b0ae761 + 23dada4 commit c8af0fc
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 22 deletions.
43 changes: 36 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,40 @@
# Videos Modal
A little JS plugin for videos embed working with tarteaucitronjs
[![NPM @latest](https://img.shields.io/npm/v/hello-motto-videos-modal.svg)](https://www.npmjs.com/package/hello-motto-videos-modal)<br>

A little JS plugin for videos embed working with tarteaucitronjs.<br>

[![NPM stats](https://nodei.co/npm/hello-motto-videos-modal.svg?downloadRank=true&downloads=true)](https://www.npmjs.org/package/hello-motto-videos-modal)

## Installation

Include `videos-modal.js` script :
### Node.js JavaScript

You may install the NPM package `hello-motto-videos-modal`. When installed you can add it in your resources.

```bash
$ npm -g 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
<script src="videos-modal.js"></script>
<!-- Normal version -->
<link rel="stylesheet" href="videos-modal.css"/>
<!-- OR the minified version -->
<link rel="stylesheet" href="videos-modal.min.css"/>
```

Include `videos-modal.css` stylesheet :
Include `videos-modal.js` or `videos-modal.min.js` script :
```html
<link rel="stylesheet" href="videos-modal.css">
<!-- Normal version -->
<script src="videos-modal.js"></script>
<!-- OR the minified and uglyfied version -->
<script src="videos-modal.min.js"></script>
```

## Usage
Expand Down Expand Up @@ -47,7 +71,11 @@ var videosModal = new VideosModal({
videos_rel: 0,
videos_controls: 0,
videos_showinfo: 0,
videos_allowfullscreen: 0
videos_allowfullscreen: 0,
videos_title: true,
videos_byline: true,
videos_portrait: true,
videos_loop: false
});
```

Expand Down Expand Up @@ -87,8 +115,9 @@ This script should work with all modern browsers (so forget IE). If you see comp

- Youtube
- Dailymotion
- Vimeo

## Next versions

At present it only supports youtube and dailymotion videos, but in the next versions it will work with other providers.<br>
At present it only supports youtube, vimeo and dailymotion videos, but in the next versions it will work with other providers.<br>
Notice that the `allowfullscreen` parameter [doesn't work with tarteaucitron (fr)](https://github.com/AmauriC/tarteaucitron.js/issues/273).
10 changes: 9 additions & 1 deletion examples/multi-providers.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,13 @@
data-videos-modal-showinfo="1" data-videos-modal-allowfullscreen="1">
Itoura
</a>
<br>
<a href="//vimeo.com/210806913" class="play" data-videos-modal-provider="vimeo"
data-videos-modal-id="210806913" data-videos-modal-autoplay="0" data-videos-modal-controls="1"
data-videos-modal-rel="0" data-videos-modal-showinfo="1" data-videos-modal-allowfullscreen="1"
data-videos-modal-loop="true" data-videos-modal-title="false">
Unknown
</a>
<div id="videos-modal"></div>
<script src="../videos-modal.js"></script>
<script src="//opt-out.ferank.eu/tarteaucitron.js"></script>
Expand All @@ -52,6 +59,7 @@
});
(tarteaucitron.job = tarteaucitron.job || []).push('youtube');
(tarteaucitron.job = tarteaucitron.job || []).push('dailymotion');
(tarteaucitron.job = tarteaucitron.job || []).push('vimeo');
var videosModal = new VideosModal({
links: 'a.play',
tarteAuCitron: tarteaucitron,
Expand All @@ -60,7 +68,7 @@
'<a href="https://www.dailymotion.com/video/xta4r" class="play" data-videos-modal-provider="dailymotion" ' +
'data-videos-modal-id="xta4r" ' + 'data-videos-modal-autoplay="0" data-videos-modal-controls="1" ' +
'data-videos-modal-rel="0" data-videos-modal-showinfo="1" data-videos-modal-allowfullscreen="1">' +
'Itoura 2' +
'Steph' +
'</a>';
document.body.insertAdjacentHTML('beforeend', itoura2);
videosModal.reset();
Expand Down
9 changes: 8 additions & 1 deletion examples/without-tarteaucitron.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,13 @@
data-videos-modal-showinfo="1" data-videos-modal-allowfullscreen="1">
Itoura
</a>
<br>
<a href="//vimeo.com/210806913" class="play" data-videos-modal-provider="vimeo"
data-videos-modal-id="210806913" data-videos-modal-autoplay="0" data-videos-modal-controls="1"
data-videos-modal-rel="0" data-videos-modal-showinfo="1" data-videos-modal-allowfullscreen="1"
data-videos-modal-loop="true" data-videos-modal-title="false">
Unknown
</a>
<div id="videos-modal"></div>
<script src="../videos-modal.js"></script>
<script>
Expand All @@ -41,7 +48,7 @@
'<a href="https://www.dailymotion.com/video/xta4r" class="play" data-videos-modal-provider="dailymotion" ' +
'data-videos-modal-id="xta4r" ' + 'data-videos-modal-autoplay="0" data-videos-modal-controls="1" ' +
'data-videos-modal-rel="0" data-videos-modal-showinfo="1" data-videos-modal-allowfullscreen="1">' +
'Itoura 2' +
'Steph' +
'</a>';
document.body.insertAdjacentHTML('beforeend', itoura2);
videosModal.reset();
Expand Down
7 changes: 5 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "hello-motto-videos-modal",
"version": "1.0.2",
"version": "1.0.3",
"description": "A little JS plugin for videos embed working with tarteaucitronjs",
"main": "videos-modal.js",
"directories": {
Expand All @@ -17,9 +17,12 @@
"videos",
"youtube",
"dailymotion",
"vimeo",
"modal",
"lightbox",
"fancybox",
"rgpd",
"GDPR",
"RGPD",
"tarteaucitron",
"tarteaucitron.js"
],
Expand Down
36 changes: 26 additions & 10 deletions videos-modal.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* Videos Modal Plugin https://github.com/hello-motto
*
* Version 1.0
* Version 1.0.3
*
* @author Jean-Baptiste MOTTO <[email protected]>
*/
Expand Down Expand Up @@ -174,6 +174,10 @@ class VideosModal
this.options.videos_controls = 0;
this.options.videos_showinfo = 0;
this.options.videos_allowfullscreen = 0;
this.options.videos_title = true;
this.options.videos_byline = true;
this.options.videos_portrait = true;
this.options.videos_loop = false;
}

/**
Expand Down Expand Up @@ -398,6 +402,10 @@ class VideosModal
var showinfo = this.setTemplateLinkValues(link, 'showinfo');
var allowfullscreen = this.setTemplateLinkValues(link, 'allowfullscreen');
var marginTop = parseInt((window.innerHeight - height) / 2) + 'px';
var title = this.setTemplateLinkValues(link, 'title');
var byline = this.setTemplateLinkValues(link, 'byline');
var portrait = this.setTemplateLinkValues(link, 'portrait');
var loop = this.setTemplateLinkValues(link, 'loop');

switch (provider) {
case 'youtube':
Expand All @@ -408,6 +416,14 @@ class VideosModal
id = this.setTemplateLinkValues(link, 'id', 'xta4r');
src = '//www.dailymotion.com/embed/video/' + id + '?info=' + showinfo + '&autoPlay=' + autoplay;
break;
case 'vimeo':
id = this.setTemplateLinkValues(link, 'id', '210806913');
src = '//player.vimeo.com/video/' + id + '?autoplay' + autoplay;
src += '&title=' + title;
src += '&byline=' + byline;
src += '&portrait=' + portrait;
src += '&loop=' + loop;
break;
}


Expand All @@ -421,6 +437,10 @@ class VideosModal
videoPlayer.setAttribute('showinfo', showinfo);
videoPlayer.setAttribute('allowfullscreen', allowfullscreen);
videoPlayer.setAttribute('autoplay', autoplay);
videoPlayer.setAttribute('title', title);
videoPlayer.setAttribute('loop', loop);
videoPlayer.setAttribute('byline', byline);
videoPlayer.setAttribute('portrait', portrait);
} else {
videoPlayer = document.createElement('iframe');
videoPlayer.setAttribute('src', src);
Expand Down Expand Up @@ -468,6 +488,10 @@ class VideosModal
targetLink.setAttribute('data-videos-modal-controls', this.getLinkAttribute(duplicatedLink, 'controls'));
targetLink.setAttribute('data-videos-modal-showinfo', this.getLinkAttribute(duplicatedLink, 'showinfo'));
targetLink.setAttribute('data-videos-modal-allowfullscreen', this.getLinkAttribute(duplicatedLink, 'allowfullscreen'));
targetLink.setAttribute('data-videos-modal-title', this.getLinkAttribute(duplicatedLink, 'title'));
targetLink.setAttribute('data-videos-modal-byline', this.getLinkAttribute(duplicatedLink, 'byline'));
targetLink.setAttribute('data-videos-modal-portrait', this.getLinkAttribute(duplicatedLink, 'portrait'));
targetLink.setAttribute('data-videos-modal-loop', this.getLinkAttribute(duplicatedLink, 'loop'));

return this;
}
Expand Down Expand Up @@ -537,21 +561,13 @@ class VideosModal
switch (provider) {
case 'youtube':
case 'dailymotion':
case 'vimeo':
return tarteaucitron.state[provider] !== false;
}
}
return false;
}

/**
* Check if the youtube player is allowed by tarteaucitron js
*
* @returns {boolean}
*/
isYoutubeAllowedByTarteAuCitron () {
return this.isTarteAuCitronEnabled() && this.options.tarteAuCitron.state.youtube !== false;
}

/**
* Set the link parameters values from current link or this.options or default value
*
Expand Down
Loading

0 comments on commit c8af0fc

Please sign in to comment.