Videos Modal
A little JS plugin for videos embed working with tarteaucitronjs.
Installation
Node.js JavaScript
You may install the NPM package hello-motto-videos-modal
. When installed you can add it in your resources.
$ npm install hello-motto-videos-modal
Direct download
Instead of using NPM, it is possible to download the last stable version here and use the files that you need.
HTML
Include videos-modal.css
or videos-modal.min.css
stylesheet :
<!-- Normal version -->
<link rel="stylesheet" href="videos-modal.css"/>
<!-- OR the minified version -->
<link rel="stylesheet" href="videos-modal.min.css"/>
Include videos-modal.js
or videos-modal.min.js
script :
<!-- Normal version -->
<script src="videos-modal.js"></script>
<!-- OR the minified and uglyfied version -->
<script src="videos-modal.min.js"></script>
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
and in the example without tarteaucitron page.
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.
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.
<div id="videos-modal"></div>
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.
<!-- Youtube Provider Video -->
<a href="https://www.youtube.com/watch?v=elbgmrH06Qg" class="videos-modal-link" data-videos-modal-provider="youtube"
data-videos-modal-id="elbgmrH06Qg" data-videos-modal-autoplay="1" data-videos-modal-rel="0"
data-videos-modal-controls="1" data-videos-modal-showinfo="1" data-videos-modal-allowfullscreen="1">
First link
</a>
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.
<!-- Video Media without provider -->
<a href="./media/scrabble.mp4" class="play" data-videos-modal-mp4="./media/scrabble.mp4" data-videos-modal-autoplay="1"
data-videos-modal-controls="1" data-videos-modal-muted="0" data-videos-modal-loop="0">
Scrabble
</a>
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.
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