Video Player Lite Wordpress Plugin


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!

How to install?
1. Go to Plugins menu
2. Add New
3. Upload file
4. Activate plugin
5. In the Wordpress menu there will be "Video Player Lite" section

Activate plugin

After you install plugin you will have to activate your license to start using the plugin.

To activate license you need to create account on the following link, where you will provide your PURCHASE CODE, and get TOKEN in return which you will then enter in plugin section to activate the plugin.

Instructions how to register

Access control panel here

This is made to make sure customers use the license on a single project (as per Envato rules) and to help customers owning many licenses to easily track on which server licenses are being used.

How to update when new plugin version has been released?
1. Delete old plugin files (through Wordpress admin or using FTP Client) and upload new plugin files.
2. Your previously created data is going to be saved.

There are 2 ways to put video in the page.

1. Create new player in Player Manager section and create new playlist in Playlist Manager section, then

get shortcode using Guttenberg block:

Note: When you create a player and a playlist in such way, they are saved and can be accessed and edited later in Player Manager and Playlist Manager section.

2. Generate shortcode in Shortcodes section to place player in page without creating player and playlist beforehand:

Generate just video shortcode (default player skin will be used):

Or generate player shortcode (choose skin and configure player in detail):

Note: if you want video shortcode included with this player shortcode, first generate video shortcode, then generate player shortcode.

CSS Styling

Each player skin comes with its own CSS file. You can choose which CSS files to include in the page in Global settings:

This way, if you only use skin aviva for example, you can only choose to include aviva skin CSS file.

Change player colors

You can change player colors in Edit Player / colors tab. This will include dynamic css for player colors.

If you dont want to include dynamic CSS for player colors (and you want to style player with your own CSS) you can turn this option off in Global settings:

You can generate shortcode using Shortcode manager admin section, but here is a quick explanation on how the shortcode can look like.

You can have shortcode in a single form (single video shortcode):

[apvpl preset="aviva" type="video" path="VIDEO_URL_HERE"]

multi video shortcode (line breaks for readability):

[apvpl preset="aviva"]
[apvpl_video type="video" path="VIDEO_URL_HERE"]
[apvpl_video type="video" path="VIDEO_URL_HERE"]
[apvpl_video type="video" path="VIDEO_URL_HERE"]
How to load single video from Google Drive?

If you want to use single files from Google Drive, use the following method:

Go to Disc – My drive:
right click on audio, Get shareable link and you get something like this:

use that audio ID to create google drive audio URL:
This is final URL how google drive audio URL should look: – use this link in player as type video.

How to load single video from One Drive?

If you want to use single files from One Drive, use the following method:

Right click on the file - Embed and copy link, you will get something like this:

<iframe src="" width="320" height="133" frameborder="0" scrolling="no" allowfullscreen></iframe>

Use just the src part:

and replace 'embed' with 'download'

so you end up with:

Use this url in player as type video.

You can initialize player when clicking some DOM element in page. This can apply to normal player type and lightbox type player.

Example, open player with Youtube video on DOM selector click:

<a href="#" class="foo">click to open player</a>
[apvpl preset="aviva" type="youtube" path="pSOoXLRBDuk" selector_init=".foo" wrapper_max_width="70%"]

Using query string parameters. Rules: all parameters begins with "vpl-", replace parameter camelCase with dash, use + instead of space, use comma for array values. If you want to use comma in title or description text for example, replace it with some other character like semicolon(;)

Player settings example:

For all possible parameters check configuration

Note: query string must have this vpl-query-instance=instanceName (instanceName is from settings). This is to differentiate between multiple players in page. Use simple instanceName for example "player1", "player2" etc.

How to create a playlist from query string?

Single video in player:

Multiple video qualities and multiple subtitles:,VIDEO_URL_QUALITY_2&vpl-path-0-label=QUALITY_MENU_TITLE_1,QUALITY_MENU_TITLE_2&vpl-description=VIDEO_DESCRIPTION&vpl-poster=VIDEO_POSTER&vpl-subtitle-0-label=SUBTITLE_LABEL_1,SUBTITLE_LABEL_2,SUBTITLE_LABEL_3&vpl-subtitle-0-src=SUBTITLE_URL_1,SUBTITLE_URL_2,SUBTITLE_URL_3,media/video/01_1080p.mp4&vpl-path-0-label=720p,1080p&vpl-description=Video+title+one&vpl-poster=media/video/01.jpg&vpl-subtitle-0-label=English,German,Spanish&vpl-subtitle-0-src=data/subtitles/sintel-en.vtt,data/subtitles/sintel-de.vtt,data/subtitles/sintel-es.vtt

Set start time in seconds (vpl-start=12, or vpl-playback-position-time=12):

If you are trying to share video url without other video parameters use playback-position-time for start time (play forth video at 12 seconds):

Multiple videos in player:,video&vpl-path-0-mp4=VIDEO_URL_QUALITY_1,VIDEO_URL_QUALITY_2&vpl-path-1-mp4=VIDEO_URL_QUALITY_1,VIDEO_URL_QUALITY_2&vpl-path-0-label=QUALITY_MENU_TITLE_1,QUALITY_MENU_TITLE_2&vpl-path-1-label=QUALITY_MENU_TITLE_1,QUALITY_MENU_TITLE_2&vpl-description=VIDEO_DESCRIPTION,VIDEO_DESCRIPTION&vpl-poster=VIDEO_POSTER,VIDEO_POSTER&vpl-subtitle-0-label=SUBTITLE_LABEL_1,SUBTITLE_LABEL_2,SUBTITLE_LABEL_3&vpl-subtitle-1-label=SUBTITLE_LABEL_1,SUBTITLE_LABEL_2&vpl-subtitle-0-src=SUBTITLE_URL_1,SUBTITLE_URL_2,SUBTITLE_URL_3&vpl-subtitle-1-src=SUBTITLE_URL_1,SUBTITLE_URL_2,video&vpl-path-0-mp4=media/video/01.mp4,media/video/01_hd.mp4&vpl-path-0-label=720p,1080p&vpl-path-1-mp4=media/video/02.mp4,media/video/02_hd.mp4&vpl-path-1-label=SD,HD&vpl-description=Video+title+1,Video+title+two&vpl-poster=media/video/01.jpg,media/video/02.jpg&vpl-subtitle-0-label=English,German,Spanish&vpl-subtitle-0-src=data/subtitles/sintel-en.vtt,data/subtitles/sintel-de.vtt,data/subtitles/sintel-es.vtt&vpl-subtitle-1-label=German,Spanish&vpl-subtitle-1-src=data/subtitles/tumblr-de.vtt,data/subtitles/tumblr-es.vtt

1. You need to have equal number of properties! (so for each video in url same number of type, same number of poster etc..)

2. Note that path and subtitles have specific format (vpl-path-0-mp4, vpl-path-1-mp4, vpl-path-0-label, vpl-path-1-label... for each video).
The same for subtitles (vpl-subtitle-0-label, vpl-subtitle-1-label, vpl-subtitle-0-src, vpl-subtitle-1-src... for each video)

For parameters check working with playlist (remove data- from parameter)

Youtube single video:

Youtube single video (with poster and decription):;+quello+di+uno+straniero+in+possesso+proveniente+da+un+pianeta+ghiacciato+e+possibilmente+incrociato+con+un+husky.&vpl-poster=

Multiple Youtube videos:,youtube,youtube&vpl-path=VIDEO_ID,VIDEO_ID,VIDEO_ID,youtube,youtube&vpl-path=jXSxzMTrKq0,5zYArkwq2PQ,M4z90wlwYs8

For parameters check working with playlist (remove data- from parameter)

Vimeo single video:

Vimeo single video (with poster and description):

For parameters check working with playlist (remove data- from parameter)

Live streaming HLS video:

Live streaming DASH video:

For parameters check working with playlist (remove data- from parameter)

To achieve the following effect of player having normal width in page, and the user can enter "theater mode" by clicking on theater button in controls. "theater mode" will make player full page width (without entering fullscreen mode).

The concepts is as follows, "parent-contaner" holds the player and has css max-width 70% (for example).

<div class="parent-container">
    <div id="vpl-player"></div>


With following settings, when player enters theater mode, parent-contaner will get class "foo" attached, which makes parent container 100% width.

var settings{

Then you add your own CSS for what you want to happen in theater mode, in this case, we make player 100% wide.


There are also these callbacks available:

vpl_playerID.addEventListener("beforeTheaterEnter", function(data){

    //called before theater enter, returns (instance, instanceName)

vpl_playerID.addEventListener("beforeTheaterExit", function(data){

    //called before theater exit, returns (instance, instanceName)


Using these events, you can achieve the same without before mentioned settings, and set CSS max-width to player on start, and then in beforeTheaterEnter, set player max width to 100%.

To show resume screen before video starts and allow user to choose either to resume video from last played position or restart from beginning:

To activate this feature use these settings in Edit Player / General settings / Playback tab:

Showing preview thumbnails when hovering over seekbar. This can be applied to html5 video, youtube and vimeo with chromeless players.

There are 2 ways of using this (use "auto" feature or provide vtt file)

1. Using "automatic" feature (works for HTML5 self hosted video only). Preview thumbnail will be generated automatically.

In Edit Playlist / Add new Media section enter "auto" in field:

2. Using vtt file (works for all media types). Requires sprite of images and vtt file with time/image data for video.

In Edit Playlist / Add new Media section enter vtt url in field.

Example of vtt file can be found inside documentation / seek folder. The coordinates are set as the xywh hash on the URL in the order X Offset, Y Offset, Width, Height.


00:00:00.000 --> 00:00:05.000

00:00:05.000 --> 00:00:10.000

00:00:10.000 --> 00:00:15.000

00:00:15.000 --> 00:00:20.000

This example is made with 120x68px thumbnails (16/9). If different format thumbnails are required, this can be changed by editing vpl.css file (vpl-preview-seek-wrap).

There are following ways to hide real video url:


To hide video url from page source enable this Encrypt media paths in Edit Player / General settings / General tab:

Or, add encrypt_media_paths="1" option in shortcode:


To have video as a blob, use following settings in Edit Player / General settings / General tab:

Or, add use_blob="1" option in shortcode:

This applies to html5 media (video, audio).

Subtitles can be set for self hosted video, audio and Youtube or Vimeo chromeless players. Subtitles can be in vtt or srt format.

Subtitle examples are provided inside documentation/subtitles directory.

Subtitles for video are added inside Edit Playlist / Add media section:

Note: Last active subtitle is saved in browser cache. If you move to next video or load video player again, player will try to select same subtitle language.

Player can use following embedding functionality in embed screen.

Embed code

You can generate embed code for whole playlist (if you have multiple videos in playlist) or for a single video. This is controlled in Edit player / General settings / Embed tab:

Video url link

Url link offers direct link to video on your website.

Following callbacks are supported:

vpl_playerID.addEventListener("setupDone", function(data){

    //called when plugin has been instantiated and is ready to use api, returns (instance, instanceName)

    //console.log(data.instance, data.instanceName);

vpl_playerID.addEventListener("mediaRequest", function(data){

    //called when new media has been requested, returns (instance, instanceName, counter)

vpl_playerID.addEventListener("mediaStart", function(data){

    //called on media start, returns (instance, instanceName, counter)

vpl_playerID.addEventListener("mediaPlay", function(data){

    //called on media play, returns (instance, instanceName, counter)

vpl_playerID.addEventListener("mediaPause", function(data){

    //called on media pause, returns (instance, instanceName, counter)

vpl_playerID.addEventListener("mediaEnd", function(data){

    //called on media end, returns (instance, instanceName, counter)

vpl_playerID.addEventListener("fullscreenBeforeEnter", function(data){

    //called before fullscreen enter, returns (instance, instanceName)

vpl_playerID.addEventListener("fullscreenEnter", function(data){

    //called on fullscreen enter, returns (instance, instanceName)

vpl_playerID.addEventListener("fullscreenExit", function(data){

    //called on fullscreen exit, returns (instance, instanceName)

vpl_playerID.addEventListener("beforeTheaterEnter", function(data){

    //called before theater enter, returns (instance, instanceName)

vpl_playerID.addEventListener("beforeTheaterExit", function(data){

    //called before theater exit, returns (instance, instanceName)



vpl_playerID is constructed from vpl_player + ID.

ID is generated automatically starting from 0 for every new player you place in page. For example, if you add one player in page, ID will be 0 (so it becomes vpl_player0).

You can also manually add instance_id in shortcode (then the plugin will use this as ID), example (This player will have ID 1):

How to use callbacks in wordpress text editor:

function addEvents(){
		vpl_playerID.addEventListener('mediaStart', function(data){

How to use returned parameters:

vpl_playerID.addEventListener('mediaStart', function(data){
    //called on media start, returns (instance, instanceName, counter)



How to use player API?

1. Using API with shortcodes

You can create most of player API using shortcode generator for player API in Edit post area (where shortcode generator is located). This way you dont have to write javascript code manully.


You want to add a button in page which will toggle mute in player. In you page you already have a player shortcode, example:

In api editor, select player you have in your page, select feature (Toggle mute) and generate shortcode.

You will get a shortcode like this:

Note that for this shortcode to work (apvpl_toggle_mute) you have to add instance_id="PLAYER_ID" in your first player shortcode. This is required so apvpl_toggle_mute shortcode can find your player in page by the same ID.

2. Using API with javascript directly

You can add javascript code directly to post area. This way you have more control over player API.

vpl_playerID is constructed from vpl_player + ID which comes from shortcode ( [apvpl player_id='4'] ). If you are adding standalone shortcode ( [apvpl type="video" path="PATH_TO_MP4_VIDEO" poster="POSTER_URL" description="DESCRIPTION_HERE"] ) then ID is generated dynamically starting from 0 for every new player in page.

You can also manually add instance_id in shortcode (then the player will use this as player ID):

[apvpl type="video" path="PATH_TO_MP4_VIDEO" description="DESCRIPTION_HERE" player_type="lightbox" selector_init=".foo" instance_id="5"]

<a href="#" class="foo">open lightbox</a>

vpl_playerID.playMedia(); //Play current media

vpl_playerID.pauseMedia(); //Pause current media

vpl_playerID.togglePlayback(); //Toggle current media (pause/play)

vpl_playerID.nextMedia(); //Play next media

vpl_playerID.previousMedia(); //Play previous media

/* set volume (0-1) */
vpl_playerID.setVolume(0); //Set volume (0)
vpl_playerID.setVolume(0.5); //Set volume (0.5)
vpl_playerID.setVolume(1); //Set volume (1)

vpl_playerID.toggleMute(); //Toggle mute

vpl_playerID.setRandom(boolean); //Set random playlist playback
vpl_playerID.setLooping(boolean); //Set playlist loop (when playlist reaches end)

vpl_playerID.toggleInfo(); //Toggle description panel
vpl_playerID.toggleShare(); //Toggle share panel
vpl_playerID.toggleFullscreen(); //Toggle fullscreen

/* set playback rate */
vpl_playerID.setPlaybackRate(0.5); //Set playback rate (0.5)
vpl_playerID.setPlaybackRate(1); //Set playback rate (1)
vpl_playerID.setPlaybackRate(2); //Set playback rate (2)
(valid for media type: video, audio, youtube, vimeo)

/* set playback quality */

/* self hosted video */

        label: 'HD',
        mp4: 'media/video/04.mp4',
        label: 'SD',
        mp4: 'media/video/04.mp4',

Example contains 2 qualities (HD, SD).
Active quality on start is specified by optional active parameter.

Note: if you do not set active:true, player will look for the first quality to load on start.

vpl_playerID.setPlaybackQuality('HD'); //Set quality video (HD)
vpl_playerID.setPlaybackQuality('SD'); //Set quality video (SD)

/* youtube */
For youtube, qualities are automatically created on video start.


Default quality on start is specified by quality:hd720
Suggested quality may not be accepted by youtube in certain cases, because their api decides which quality to use in the end, depending on playback size, device playback is running on, bandwidth etc...

vpl_playerID.setPlaybackQuality('hd720'); //Set quality youtube (hd720)
vpl_playerID.setPlaybackQuality('hd1080'); //Set quality youtube (hd1080)

/* subtitle */
Set subtitle (from label)

        label: 'English',
        src: 'data/subtitles/sintel-en.vtt',
        label: 'German',
        src: 'data/subtitles/sintel-de.vtt'

vpl_playerID.setSubtitle('English'); //Set subtitle ('English')
vpl_playerID.setSubtitle('German'); //Set subtitle ('German')
vpl_playerID.setSubtitle(''); //Set subtitle off ('')

/* seek (seconds) */
--------------------------; //seek (0); //seek (5); //seek (15)

vpl_playerID.seekBackward(value); //seek {value} seconds backwards (default 10)
vpl_playerID.seekForward(value); //seek {value} seconds forward (default 10)

/* load media from playlist on demand */
by counter (counting start from zero, 0 = first media, 1 = second media...)
vpl_playerID.loadMedia('counter', 0); //Load first media in playlist
vpl_playerID.loadMedia('counter', 2); //Load third media

by mediaId attribute
vpl_playerID.loadMedia('id', 7); //Load media with mediaId value 7
vpl_playerID.loadMedia('id', 2'); //Load media with mediaId value 2

/* add track(s) to playlist */
play video in the player on demand

var track_list = [

        type: 'youtube_single', 
        path: '5zYArkwq2PQ'

        type: 'video', 
        path: [
            {label: 'default', mp4: 'media/video/06.mp4'},
        description:'Custom description here.',

        type: 'video', 
        path: 'media/video/03.mp4',
        description:'Custom description here.',


vpl_playerID.addMedia(track_list[0]); //add first video from track_list
vpl_playerID.addMedia(track_list[1]); //add second video from track_list

//addMedia = function(value, playit, insertPosition)
    value = video data
    playit = true / false
    insertPosition = 0 - at start, 1 second etc (not defined, goes to end)

/* destroy current playing media / playlist */
vpl_playerID.destroyMedia(); //Destroy current playing media

vpl_playerID.destroyPlaylist(); //Destroy whole plalyist (player is empty after this, has no videos in queue)

vpl_playerID.getPlaylistLength(); //get playlist length

vpl_playerID.getSetupDone(); //get setup done (player inited, ready to use api)

vpl_playerID.getMediaPlaying(); //get media playing

/* resize */
vpl_playerID.resize(); //resize player so it can get correct size. Are you using this in a tab maybe where the parent container is hidden (css display none)? If so, you need to initialize the player after its being shown in tab or call player.resize() API method so the player can correctly resize itself!


vpl_playerID is constructed from vpl_player + ID.

ID is generated automatically starting from 0 for every new player you place in page. For example, if you add one player in page, ID will be 0 (so it becomes vpl_player0).

You can also manually add instance_id in shortcode (then the plugin will use this as ID), example (This player will have ID 1):

How to use api methods in wordpress post?

Use following code examples in post area.

Toggle playback:

<a onclick="togglePlayback();return false;" href="#">Toggle playback </a>
    function togglePlayback(){   
        vpl_playerID.togglePlayback(); return false;  

Set volume:

<a onclick="setVolume(0.5);return false;" href="#">set volume </a>
    function setVolume(val){   
        vpl_playerID.setVolume(val); return false;  

Load another video:

<a onclick="loadMedia();return false;" href="#">load new video </a>
    function loadMedia(){   

        var obj = {
            type: 'video', 
            path: 'VIDEO URL',
            poster:'OPTIONAL VIDEO POSTER',
            description:'Custom description here.'

        vpl_playerID.loadMedia('data', obj);return false;  

Autoplay is disabled since recent browser changes and requires user interaction with the page before (like a click or keypress) to start playback:

Volume on mobile

Volume cannot control the on Apple IOS with javascript, you have to use the physical button on the actual phone: Volume Control in JavaScript

Plugin does not work as expected

If the plugin does not work as expected, try the following tests to see if it makes a difference and what could be causing an issue:

1. Update to latest plugin files available on Codecanyon

2. Switch to default Wordpress theme

3. Check for errors in browser developer console (Chrome F12 key, Console tab)

4. Try to deactivate any 3rd party plugins (the ones that not come with Wordpress)

5. Clear browser cache

6. If you still have issues after you have done all changes above, you can send a message at , provide your PURCHASE CODE, provide a link to your live page, and a temporary user and password for your wordpress admin panel so we can have a look.