Video Background WPBakery Addon

Thank you for purchase of this plugin. If you have any questions that are beyond the scope of this help file, please feel free to send a detailed message on the following link.

• codecanyon.net/user/Tean

How to install?

Make sure you extract downloaded plugin file from Envato, inside you will find file named: 'wpbakery_apvb.zip'. This is the plugin file you upload in WordPress panel when you want to install the plugin!

1. In WordPress panel go to Plugins menu
2. Under Plugins menu click "Add New"
3. Select "Upload", choose the archive wpbakery_apvb.zip that you downloaded and click "Install Now"
4. After the plugin is installed click "Activate Plugin"

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?

How to add video to page?

In WPBakery page editor go to add new element and search for Video Background.

Intro

With this plugin you can add videos in the page, but also images and audio.

You can add one or more videos into the page. When one video ends, next will play (if you have multiple videos in widget).

Video can be added as fixed background, meaning video will be placed in the background (behind all other elements in page) and it will have full page width and height. Alternatively, video can also be added inside other element in page (like a div).

Plugin can also add some basic buttons to control video (pause / play, next / previous video, restart video, volume, fullscreen etc..)

Quick usage

1. Create new widget.

2. Under Media sources choose source type and add video url.

Video can be placed in the page in the folowing ways:

1. If you want video to stay fixed behind all other elements in your page, set fixed background Yes:

2. If you dont want to use it as fixed background but want to place a video in some specific element on the page (like some div for example), set fixed background No:

With fixed background se to No, You can also adjust background aspect ratio to fit your videos. If your videos are 16/9 enter 16/9. If your videos are 4/3 enter 4/3 etc.

Fitting video to your element on the page

If you have some element in the page that you want to fit video in and you dont want to use background aspect ratio like mentioned above, you need to apply some height to your div, for example using following CSS:

.your-div{
    min-height: 500px; 
}

When you add video to page, you can adjust how it will be displayed inside the container it was placed. Basically there are 2 main adjustment, making video fit inside or fill whole screen. This is useful if you want to get rid of black areas which may appear around your video, depending on the resolution.

Note that this only applies for HTML video, not Youtube or Vimeo.

Add link to video (or other media source) in Media sources tab. You can add one or more videos into the page. When one video ends, next will play (if you have multiple videos in widget).

Mp4 video example:

    Upload or link to mp4 video
    

Mp4 360 virtual reality video example:

   
    Upload or link to mp4 video which is virtual reality
    

Vimeo video example:

   
    Provide single Vimeo video ID example: 165017258
    

Youtube video example:

 
    Provide single Vimeo video ID example: pSOoXLRBDuk  
    

HLS live streaming video example:

  
    Provide url to m3u8 HLS live stream, example https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8   
    

MPEG DASH live streaming video example:

      
    Provide url to m3u8 HLS live stream, example https://dash.akamaized.net/dash264/TestCases/4b/qualcomm/1/ED_OnDemand_5SecSeg_Subtitles.mpd
    

Image example:

     
    Upload or link to image file
    

Image 360 panorama example:

     
    Upload or link to image file which is virtual reality image panorama
    

Audio example:

  
    Upload or link to audio file
    

With audio file, you can also specify poster or image slideshow, which is shown while audio plays.

If you use any of the video control buttons (pause / play, next / previous video, fullscreen etc), by default they are placed above the video area.

Video controls can be adjusted in Controls tab:

Depending on where you place video in your website, some other elements in your page may potentially block these controls, like for example, maybe you have a footer in your website and it sits above the controls, and when you try to use these controls, it may seem like they dont work, simply because your footer may be blocking them.

Following are the ways you can solve this:

1. You can try to change player controls z-index by adding following CSS, example:

.vb-controls{
	z-index:10;
}

2. If above does not work, you can try to place controls in some other element in the page (which sits above other elements) using Controls container (specify ID/Class name selector of the element in which you want to place controls for example #my-div):

Player controls will then be placed inside that container.

Using custom button to control video

This example will show how to add custom button in page to control video.

1. Set player ID in General settings

2. Search for button widget and drag widget to page:

Set button ID attribute (choose something unique):

3. Search for HTML widget and drag widget to page:

Add following code inside HTML widget (this code will pause / play video):

 <script>
    document.getElementById('my-button')?.addEventListener('click', function(e){
    	e.preventDefault();
        if(window.my_player1)my_player1.togglePlayback();  
    });
</script>

Note that HTML widget needs to be present after button in page.

You can do the same with other API methods.

Example, restart video

 <script>
    document.getElementById('my-button')?.addEventListener('click', function(e){
    	e.preventDefault();
        if(window.my_player1)my_player1.seek(0);
    });
</script>

Icons in player are SVG and you can change them in Button icons tab:

Using SVG for icons

To get SVG code, for example, go to Font Awesome page, choose icon and copy SVG code. Of course you can get SVG code from different websites.

Activate skip intro feature in General settings tab (set Video end link and Show skin intro button ):

This will add Skip intro button above the video. You can add your own HTML and CSS for the button. Note that if some elements in your website sit above this skip intro button, they might block access to this button, in which case you can try solve this with CSS z-index.

Make sure HTML you add contains vb-skip-intro class because this is what triggers click.

Following callbacks are supported:

Set your own player ID in General tab (in this example we used vb_player1 but this can be anything):

vb_player1.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);
   
})
vb_player1.addEventListener('mediaRequest', function(data){
    //called when new media has been requested, returns (instance, instanceName, media)
    
})
vb_player1.addEventListener('mediaStart', function(data){
    //called on media start, returns (instance, instanceName, media)
    
})
vb_player1.addEventListener('mediaPlay', function(data){
    //called on media play, returns (instance, instanceName, media)
    
})
vb_player1.addEventListener('mediaPause', function(data){
    //called on media pause, returns (instance, instanceName, media)
    
})
vb_player1.addEventListener('mediaEnd', function(data){
    //called on media end, returns (instance, instanceName, media)
    
})
vb_player1.addEventListener('fullscreenEnter', function(data){
    //called on fullscreen enter, returns (instance, instanceName)
    
})
vb_player1.addEventListener('fullscreenExit', function(data){
    //called on fullscreen exit, returns (instance, instanceName)
    
});
    

How to use callbacks in WPBakery?

There are several ways to add javascript code to your website. In WPBakery, one of the ways is to add HTML widget in page (add widget before the player):

Then paste javascript code inside HTML widget:

<script>
addEvents();
function addEvents(){
    if(!window.vb_player1){
        setTimeout(addEvents,100);
    }else{
        vb_player1.addEventListener('mediaStart', function(data){

        });
    }
}
</script>
    

How to use returned parameters:

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

    console.log(data.instance);
    console.log(data.instanceName);
    console.log(data.media);

});
    

Following api methods are included:

Set your own playerID in General Settings tab:

vb_player1.playMedia(); //Play current media

vb_player1.pauseMedia(); //Pause current media

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

vb_player1.nextMedia(); //Play next media

vb_player1.previousMedia(); //Play previous media

/* set volume accept values 0-1 */
----------------------------------
vb_player1.setVolume(0); //Set volume (0)
vb_player1.setVolume(0.5); //Set volume (0.5)
vb_player1.setVolume(1); //Set volume (1)

vb_player1.toggleMute(); //Toggle mute

vb_player1.setPlaybackRate(0.5); //Set playback rate (0.5)
vb_player1.setPlaybackRate(1); //Set playback rate (1)
vb_player1.setPlaybackRate(2); //Set playback rate (2)

vb_player1.getCurrentTime(); //Get current time
vb_player1.getDuration(); //Get duration


/* seek accepts seconds */
--------------------------
vb_player1.seek(0); //seek (0)
vb_player1.seek(5); //seek (5)
vb_player1.seek(15); //seek (15)

vb_player1.setRandom(); //Set random playlist playback

vb_player1.setLooping(); //Set playlist looping (when playlist reaches end)

/* load video on demand */
--------------------------
vb_player1.loadMedia(0); //Load first video (counting starts from zero)
vb_player1.loadMedia(2); //Load third video



/* load new video */
player1.cleanMedia();//first destroy current video (optional), if not video will be added to the end
var video_data = {
    type:'video',
    path:'VIDEO_URL_HERE'
}
player1.loadMedia(video_data);//load new video




--------------------------
vb_player1.destroyMedia(); //Destroy current playing video

    

How to use API methods in WPBakery?

There are several ways to add javascript code to your website. In WPBakery, one of the ways is to add HTML widget in page (add widget before the player):

Then paste javascript code inside HTML widget:

Use following code examples:

Toggle playback:

<a onclick="togglePlayback();return false;" href="#">Toggle playback </a>
 <script>
    function togglePlayback(){   
        if(window.vb_player1)vb_player1.togglePlayback(); return false;  
    };
 </script>

Set volume:

<a onclick="setVolume(0.5);return false;" href="#">set volume </a>
 <script>
    function setVolume(val){   
        if(window.vb_player1)vb_player1.setVolume(val); return false;  
    };
 </script>

Load another video:

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

        var obj = {
            type: 'video', 
            path: 'VIDEO URL',
            poster:'OPTIONAL VIDEO POSTER',
        }

        if(window.vb_player1)vb_player1.loadMedia('data', obj);return false;  
    };
 </script>

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. If you still have issues after you have done all changes above, you can send a message at http://codecanyon.net/user/Tean#contact , provide a link to your live page, and a temporary user and password for your WordPress admin panel so we can have a look.

How to contact us?

If you have any questions after purchase, send a message at http://codecanyon.net/user/Tean#contact, and provide your PURCHASE CODE.