Media Hovers


Thank you for purchase. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form on the link above. Thanks so much!


With this plugin you can add images in the page, that can play audio or video on hover or a click.
You can also add title and description to images, attach link which will open in lightbox, or attach url link to images.
You can also add your own HTML inside every item.

To play video on hover, recommended usage would be having short videos (10 seconds or so), encoded for the small filesize (so the can load quickly on hover).
Each video will not be loaded and start playing until mouse enters image area. Then if you want to display high resolution video, you can open this video in lightbox.

Best use is to have images the same size (or resolution) as videos what will play on hover. This way video will always show in its full size, since it will be same size as image thumbnails. You can take snapshots from video to create image thumbnails. Alternative is to use image cover option.

There are 2 ways to start playback on desktop browsers (hover and click). On mobile browsers video will always play on click.

Include the following css and javascript code into HEAD section of the page:

<link rel="stylesheet" type="text/css" href="css/aplbox.css" media="all"/><!-- lightbox -->
<link rel="stylesheet" type="text/css" href="css/mpp.css"/>
<script src="js/aplbox.js"></script><!-- lightbox -->
<script src="js/new.js"></script>


1. lightbox css and javascript are only required if you want to use lighbox.

Create HTML markup for the plugin in BODY section of the page:

<div id="wrap" class="LAYOUT CLASSES GO HERE">
    <div class="mpp-playlist-inner">
        <div class="mpp-playlist-content">

            <div class="mpp-playlist-item" data-thumb="media/audio/thumb/01.jpg" data-hover-type="audio" data-hover-path="media/audio/main/01.mp3" data-title="title here" data-description="description here"></div>
            <div class="mpp-playlist-item" data-thumb="media/video/thumb/01.jpg" data-hover-type="video" data-hover-path="media/video/main/01.mp4"></div> 


Classes define item layout:


 - description below thumbnail:

mpp-dbt mpp-skin-pure
mpp-dbt mpp-skin-ground

- description over thumbnail:

mpp-dot mpp-skin-averta-in
mpp-dot mpp-skin-averta-out

mpp-dot mpp-skin-sirius-in
mpp-dot mpp-skin-sirius-out

mpp-dot mpp-skin-vega
mpp-dot mpp-skin-antares
mpp-dot mpp-skin-pollux
mpp-dot mpp-skin-capella

- description right of thumbnail:

mpp-drot mpp-skin-tauri 



Icons position: (link, lightbox icon)

mpp-controls-c   - icons center
mpp-controls-tl  - icons top left
mpp-controls-tr  - icons top right
mpp-controls-bl  - icons bottom left
mpp-controls-br  - icons bottom right

Shadow on the item:


Initialize the plugin:

<script type="text/javascript">

	document.addEventListener("DOMContentLoaded", function(event) { 
	var settings = {
            ....settings go here...
        new apmpp(document.getElementById("wrap"), settings); 

Available settings:

Parameter Value description
createMarkup true / false Creates html markup for hover items. Default true.
instanceName Name of the player instance (string), can be used for api (no spacing or special chars)
sourcePath Optional path to plugin root. Plugin will load masonry javascript file (if needed) from js directory so it need relative path to that directory from root where the gallery is located.
gridType masonry / justify / tiles / carousel Apply masonry layout to gallery, justify is same height per line, tiles are single line left to right elements, carousel is sliding tiles.
playbackMethod hover / click How to start video play on desktop browsers.
mobilePlaybackMethod click / down How to start video play on mobile. "click" will play video on click, while "down" will play video only while finger is down.
showVideoInTooltip true / false Play video in tooltip (instead of inline). Valid for desktop browsers.
unmuteOnUserInteraction true / false If self hosted video is set muted, this will unmute all after user has interacted with the document (click, keypress, scrollbar).
playbackRate video / audio playback rate.
playbackTrigger DOM selector Element selector that will trigger video playback. Possible values are (classnames):

.mpp-inner - apply to whole item
.mpp-content - apply to thumbnail
.mpp-info - apply to title and description
your own custom class
linkTrigger DOM selector Element selector that will trigger link to open. Possible values are (classnames):

.mpp-inner - apply to whole item
.mpp-content - apply to thumbnail
.mpp-info - apply to title and description
.mpp-link-icon - apply to icon which will be created
your own custom class if you add custom HTML inside item

Note that you cannot have playback, lightbox and link attached to the same element!
lightboxTrigger DOM selector Element selector that will trigger lightbox to open. Possible values are (classnames):

.mpp-inner - apply to whole item
.mpp-content - apply to thumbnail
.mpp-info - apply to title and description
.mpp-lightbox-icon - apply to icon which will be created
your own custom class if you add custom HTML inside item

Note that you cannot have playback, lightbox and link attached to the same element!
rewindOnHover true / false Rewind to start self hosted video / audio on hover.
useControls true / false Use video /audio controls. On Vimeo to hide controls, video needs to be uploaded with plus accout or higher.
useBlocker true / false Use transparent div over Youtube or Vimeo to block click. If useControls is true, useBlocker is false by default.
swapImageSourcesWidth number On resize swap thumbnail sources between standard and high resolution thumbnail. You need to supply both normal and high resolution thumbnail ( data-thumb-maxres ) for this feature. Set width in pixels on which image swap happens.
useShare true / false Open social sharing dialog when share icon is clicked. This is not related to social sharing when lightbox is opened (Fancybox)
shareIcon Image icon for share button in controls.
linkIcon Image icon for Url link button in controls.
lightboxIcon Image icon for zoom/lightbox button in controls.
shareTooltip Tooltip for share icon.
linkTooltip Tooltip for link icon.
lightboxTooltip Tooltip for lightbox icon.
useVideoLoader true / false Use video loader over Youtube and Vimeo hovers.
disableHoverOnMobile true / false Disable hover action on mobile.
startVideoDelay miliseconds How much to delay start of video playback on hover. Applies to self hosted video. You can use this to make video start playing after some image hover effect has finished to focus user on hover effect first then on video afterwards.
hoverClass classname classname to apply to image when you hover over it or to center item in carousel grid.
hoverClassMinWidth number (pixels) Minimum width at which to apply hoverClass. hoverClass by default used scale and scales the image to larger size. This means on smaller screens, when only single grid image is visible, might cause image to be larger then the screen after scaling. Use this option to restrict on which size to apply hoverClass
imageMode img / cover Apply image to display thumbnails or background-image. Using background-image may help if your images are not the same size as videos you want to show on hover. Default is img
imageAspectRatio 1.7777777 Image aspect ratio. If you use image mode background image, set default aspect ratio for your images, for example 1.333333 = 4/3. Default is 16/9 (1.777777)

Making hovers with self hosted video / audio / images.


<div class="mpp-playlist-item" data-thumb="url to thumbnail" data-hover-type="video" data-hover-path="url to video which will show on hover" data-lightbox-path="url to video which will show in lightbox" data-link="external url link here" data-target="_blank"></div>


Parameter Required Value
data-title title
data-subtitle sub title (emphasized part of title), used in some skins (Sarah, Zoe, Bubba...)
data-description description
data-thumb yes, but check this section path to image thumbnail
data-thumb-maxres path to max resolution image thumbnail (if you want to swap image sources on window resize)
data-img-alt thumbnail alt text (default is title)
data-hover-type video / audio / image / youtube / vimeo
data-hover-path url to image, self hosted audio, self hosted video, Youtube video ID (example: 89s2DVcsoyk), Vimeo video ID (example: 6829621)

If you want to set start time for self hosted video and audio append #t=seconds to url, which means start at 2 seconds for example:

data-hover-path-mobile optional different video quality for mobile, only for self hosted video!

Use example: use data-hover-path for higher video quality on desktop and data-hover-path-mobile for lower quality on mobile.
data-lightbox-path See lightbox section for more info.
data-link Add external link url to the thumbnail. Note: there can either be lightbox path (data-lightbox-path) or link (data-link) on the whole thumbnail, not both.
data-target external link url target (_self, _parent, _blank)
data-media-id number Add unique media id attribute to each item so you can use API calls. Example play video (id)

You can also use self hosted video without thumbnail, then video will be shown from the start instead of thumbnail.

To define video start frame, append this to the data-hover-path: '#t=2' which means video start frame is 2 seconds, example:

<div class="mpp-playlist-item" data-hover-type="video" data-hover-path="url/to/video#t=2"></div>

Note that if you use layouts like masonry or justify, it may not work correctly without thumb!

1. Youtube can be used with single video ID (add Youtube video ID directly in data-hover-path):

<div class="mpp-playlist-item" data-thumb="path to thumbnail" data-hover-type="youtube" data-hover-path="rNTyF4qXw3A"></div>

Note: this will not use api to retrieve video title, description or thumbnail from Youtube. It will just play Youtube video on hover. Same parameters are valid.

Note: Using Vimeo player without Vimeo default controls is only available for videos hosted by a Plus account or higher!

1. Vimeo can be used with single video ID (add Vimeo video ID directly in data-hover-path):

<div class="mpp-playlist-item" data-thumb="path to thumbnail" data-hover-type="vimeo" data-hover-path="37848135"></div>

Note: this will not use api to retrieve video title, description or thumbnail from Vimeo. It will just play Vimeo video on hover. Same parameters are valid.

Tiles is a default type grid in which images go left to right. Best to use with images that are equal dimensions. Tiles is applied automatically when no other grid type is specified.

Apply responsive breakpoints to grid:

   {width:0, column:1, gutter:0},
   {width:500, column:2, gutter:0},
   {width:700, column:3, gutter:10},
   {width:1100, column:4, gutter:10},
   {width:1600, column:5, gutter:10}

Below 500px, use 1 column, 0px spacing between grid boxes
below 700px use 2 columns, 0px spacing between grid boxes

Masonry is mixed type grid, can be used with images of different dimensions.

Apply masonry to grid with following settings:


Available settings:

Parameter Value description
gridType masonry type of grid
horizontalOrder true / false

Masonry requires following scripts in head tag:

<script src="js/masonry.pkgd.min.js"></script>

Apply responsive breakpoints to grid:

   {width:0, column:1, gutter:0},
   {width:500, column:2, gutter:0},
   {width:700, column:3, gutter:10},
   {width:1100, column:4, gutter:10},
   {width:1600, column:5, gutter:10}

Below 500px, use 1 column, 0px spacing between grid boxes
below 700px use 2 columns, 0px spacing between grid boxes

Justify is mixed type grid in which images have equal height per row, can be used with images of different dimensions.

Apply justify layout to the grid with following settings:

maxRowHeight: 350,
gutter: 0,

Available settings:

Parameter Value description
gridType justify type of grid
maxImagesPerLine number restrain number of images per line
maxRowHeight number restrain row height. rows can be different height (depending on image sizes), but this is maximum height.
gutter number spacing between images in justify layout

Justify requires following scripts in head tag:

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/apjustify.js"></script>

Note that justify grid type requires thumbnails set, and it might not work with only videos in the grid.

Using option to autoplay videos in the grid.


Parameter Value Description
autoplayVideosOnStart true / false Autoplay all self hosted videos on start. Rules: valid for self hosted videos, videos will be muted. Disabled for carousel.
autoplayVideosOnStartMode all / next / random Autoplay videos mode. Play all, play one by one in order, play random order.
autoplayVideosOnStartHoverAction true / false Apply hover action on item while autoplay video happens (valid for next, random modes).

When autoplayVideosOnStart is true, only videos will be used, meaning you dont need to provide thumbnails with data-thumb="THUMB URL".

Exception is if you use gridType justify, you need to have thumbnails set, because justify grid requires image sizes for calculation.

You can add any HTML inside a hover element and then style it with CSS, for example:

<div class="mpp-playlist-item" data-thumb="path to thumbnail" data-hover-type="video" data-hover-path="path to mp4 video which will show on hover">

    <span class="foo">Your own HTML here, format is with CSS.</span>


Attach lightbox and link url to that custom element you just placed:

<script type="text/javascript">
var settings = {

<div class="mpp-playlist-item" data-thumb="path to thumbnail" data-hover-type="video" data-hover-path="path to mp4 video which will show on hover" data-lightbox-path=""  data-lightbox-type="video" data-link="">

    <span class="foo">I will open lightbox link</span>

    <span class="elephant">I will open link url</span>


To create categories following is required:

1. In settings:

useCategory: true,
categoryDefaultOnStart: 'all',
categoryAllowSelectMulti: false,
categoryShowMultiOnly: false,


Parameter Value Description
useCategory true / false Use category. Not available with carousel type grid.
categoryDefaultOnStart value from data-slug attribute in category menu Default category on start
categoryAllowSelectMulti true / false Allow to select multiple categories
categoryShowMultiOnly true / false When multiple categores are selected, only show items that belong to all selected categories

2. In HTML, add category menu:

<div class="mpp-category-tags mpp-category-tags-tl">
    <div class="mpp-category-tag mpp-category-tag-selected" data-slug="all">Show all</div>
    <div class="mpp-category-tag" data-slug="videography">Videography</div>
    <div class="mpp-category-tag" data-slug="sound-effects">Sound effects</div>


Parameter Value Description
data-slug category slug (Only A-Z, a-z, 0-9 allowed)
mpp-category-tags-tl mpp-category-tags-tl
css positioning of category menu (top left, top center, top right, bottom left, bottom center, bottom right)
mpp-category-tag-selected selected category on start

3. data-category attribute on each mpp-playlist-item, which category item belongs to (value from data-slug in category menu):

<div class="mpp-playlist-item" data-category="videography" data-thumb="media/video/thumb/02.jpg" data-hover-type="video" data-hover-path="media/video/main/02.mp4"></div>

<div class="mpp-playlist-item" data-category="sound-effects" data-thumb="media/video/justify/01.jpg" data-hover-type="video" data-hover-path="media/video/justify/01.mp4"></div>

Example demo which uses categories is category.html

If you have lots of images in the gallery, use load more option to save bandwidth and improve load speed. Check load_more.html demo for more details.

Basically provide html markup and call player API addMore function:

 var s = '<div class="mpp-playlist-item" data-thumb="media/video/main2/thumb/01.jpg" data-hover-type="video" data-hover-path="media/video/main2/01.mp4"></div>'+
'<div class="mpp-playlist-item" data-thumb="media/video/main2/thumb/02.jpg" data-hover-type="video" data-hover-path="media/video/main2/02.mp4"></div>'+
'<div class="mpp-playlist-item" data-thumb="media/video/main2/thumb/03.jpg" data-hover-type="video" data-hover-path="media/video/main2/03.mp4"></div>'+
'<div class="mpp-playlist-item" data-thumb="media/video/main2/thumb/04.jpg" data-hover-type="video" data-hover-path="media/video/main2/04.mp4"></div>';


Show subtitles above video area

Subtitles are available for self hosted video, Youtube, Vimeo and audio. Supported formats for subtitles are vtt or srt.

To add subtitle to item add data-subtitles attribute. Subtitle most likely needs to be located on the same domain.

<div class="mpp-playlist-item" data-thumb="media/video/main2/thumb/01.jpg" data-hover-type="video" data-hover-path="media/video/main2/01.mp4" data-subtitles="SUBTITLE_URL"></div>

Subtitle can be styled with CSS. Subtitle format is:

<div class="mpp-subtitle-holder"><div class="mpp-subtitle-holder-inner">Lorem ipsum dolor</div></div>

Example demo using subtitles is subtitles.html

When you create a grid of images, the aim is to have images the same size (same resolution) as videos that will be shown on hover.

Default method when image thumbnails are created is an img tag (with classname mpp-thumb) which is placed inside mpp-content element:

<div class="mpp-playlist-item">
    <div class="mpp-inner">
        <div class="mpp-content">
            <img src="media/video/justify/02.jpg" class="mpp-thumb">
            <div class="mpp-media">VIDEO WILL BE CREATED HERE ON HOVER</div>
            <div class="mpp-title">Image title</div>

Alternative method is to use CSS background-image cover with the following option:


This will not create an img tag but add image as background-image to mpp-content element.

Using this method might help if your images and not the same size as videos.

Its recommended to use thumbnail images with videos (because it may cause problems on mobile browsers if only videos are used).

You can add an icon over hover element to display its content, for example video / audio / image etc... Icon will then hide on hover. Check icons.html demo.

Use the following css to achieve this:

.mpp-playlist-item .mpp-media {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 64px 64px; 
.mpp-playlist-item[data-hover-type="video"] .mpp-media {
.mpp-playlist-item[data-hover-type="audio"] .mpp-media {
.mpp-playlist-item[data-hover-type="image"] .mpp-media {
.mpp-playlist-item[data-hover-type="youtube"] .mpp-media {
.mpp-playlist-item[data-hover-type="vimeo"] .mpp-media {
.mpp-playlist-item:hover .mpp-media {
    background: none;

Using social sharing standard way requires useShare:true in settings. This will create icon above thumbnail which opens share window. You can add your own share url with data-share attribute in mpp-playlist-item or window.location.href will be shared.

<div class="mpp-playlist-item" data-thumb="path to thumbnail" data-share="custom share url can go here">

Social sharing also required this html inside plugin wrap element:

<div class="mpp-share-holder">
    <div class="mpp-share-holder-bg"></div>
    <div class="mpp-share-holder-inner">
        <div class="mpp-share-data">

            <div class="mpp-share-title">Share</div>

            <div class="mpp-share-inner">
                <div class="mpp-share-item mpp-contr-btn" data-type="tumblr" title="Tumblr">
                    <svg viewBox="0 0 320 512"><path d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"></path></svg>
                <div class="mpp-share-item mpp-contr-btn" data-type="twitter" title="Twitter">
                    <svg viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path></svg>
                <div class="mpp-share-item mpp-contr-btn" data-type="facebook" title="Facebook">
                    <svg viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"></path></svg>
                <div class="mpp-share-item mpp-contr-btn" data-type="whatsapp" title="WhatsApp">
                    <svg viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg>

                <div class="mpp-share-item mpp-contr-btn" data-type="linkedin" title="LinkedIn">
                    <svg viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg>
                <div class="mpp-share-item mpp-contr-btn" data-type="reddit" title="Reddit">
                    <svg viewBox="0 0 512 512"><path d="M201.5 305.5c-13.8 0-24.9-11.1-24.9-24.6 0-13.8 11.1-24.9 24.9-24.9 13.6 0 24.6 11.1 24.6 24.9 0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4 0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7 0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9 0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5 0 52.6 59.2 95.2 132 95.2 73.1 0 132.3-42.6 132.3-95.2 0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6 0-2.2-2.2-6.1-2.2-8.3 0-2.5 2.5-2.5 6.4 0 8.6 22.8 22.8 87.3 22.8 110.2 0 2.5-2.2 2.5-6.1 0-8.6-2.2-2.2-6.1-2.2-8.3 0zm7.7-75c-13.6 0-24.6 11.1-24.6 24.9 0 13.6 11.1 24.6 24.6 24.6 13.8 0 24.9-11.1 24.9-24.6 0-13.8-11-24.9-24.9-24.9z"></path></svg>
                <div class="mpp-share-item mpp-contr-btn" data-type="pinterest" title="Pinterest">
                    <svg viewBox="0 0 496 512"><path d="M496 256c0 137-111 248-248 248-25.6 0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8 0 128.7-68.8 128.7-154.3 0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1 0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6 0-54.7 41.4-107.6 112-107.6 60.9 0 103.6 41.5 103.6 100.9 0 67.1-33.9 113.6-78 113.6-24.3 0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6 0-19-10.2-34.9-31.4-34.9-24.9 0-44.9 25.7-44.9 60.2 0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9 0 361.1 0 256 0 119 111 8 248 8s248 111 248 248z"></path></svg>

            <div class="mpp-share-close" title="Close"><svg viewBox="0 0 24 24"><path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path></svg></div>


Following api methods are included:

clearPlayback(); //clear last active playing video, if exist. 

//play / pause all videos
//Valid for autoplayVideosOnStart:true or when you have just videos without thumbnails
pauseAllMedia();// Pause all self hosted video / audio. 
playAllMedia();// Play all self hosted videos / audio. 

//perform full hover action
hoverMediaStart(id);// start hover specific item by data-media-id attribute. 
hoverMediaEnd(id);// end hover specific item by data-media-id attribute. 

Example: hoverMediaStart(4);

<div class="mpp-playlist-item" data-thumb="media/video/thumb/04.jpg" data-hover-type="video" data-hover-path="media/video/main/04.mp4" data-media-id="4"></div>

toggleGridAutoPlay(boolean); // start stop grid carousel

Autoplay policy

Most brosers prevent autoplay if user has not interacted with the page previously (like a click). More details:

Other option is unmuteOnUserInteraction:true in settings which will try to unmute self hosted videos and allow playback if the user has interacted with the page before.

Plugin does not work as expected?

Send a message at with your purchase code. Please include as many details as possible to describe the issue you are having so we can quickly resolve it. Include a link to your live page if possible to illustrate the problem so we can have a look.

How to contact us?

If you have any questions after purchase, send a message at, and provide your PURCHASE CODE.