JUX Background Video is an innovative full screen background video module for Joomla 3.x.
JUX Background Video will make your site’s viewers be amazed with the full screen videos playing on your site. It allows you to easily add fit-to-fill incorporating background videos to your website. People come to your site will just enjoy what you have with comfort.
The module is very flexible in stretching your videos to fill the screen and makes it harmonize with your site’s content. Also, you can set the default volume or play silent ambient background video. You can upload, preview, delete and order videos by dragging and dropping too. Customizing CSS to background videos supported.
Get ready to reach your customers and increase their engagement with your site by the help of JUX Background Video.
Key features:
Frontend FullScreen style
Frontend Ponsition Style
Our extension has several system requirements as follow:
You have to ensure that your system has already installed, XML and Zlib-Support built into your PHP.
PHP should be compiled with support for https (openSSL) and cURL.
PHP Safe Mode should be turned off.
As said on the feature list, this module work with major browsers but there are some requirement.
After purchased our product, you’ll see the download link at JUX Background video product page: http://www.joomlaux.com/download.html
Note: If there is any problem, Please contact us via Suport: http://www.joomlaux.com/support/contact-us.html
The installation package that you downloaded to your computer. You we’ll see these files:
Modules |
mod_jux_background_video.zip |
Go to Administrator site => “Extension” => “Extension Manager” in the Top Menu.
In “Upload Package File” block, please Upload & Install our extension:
Browse the JUX Background Video folder, select mod_jux_background_video.zip then choose Upload and install.
Figure 1: Extension Manager
You can choose background video style: Full screen or Module position.
Configure in tab Module
Figure 2: Tab module
Background Mode |
Using full screen background or assign a module position |
Overlay |
Select 1 in 3 Overlay styles for JUX background Video: None, Pattern, color |
Pattern |
Select Pattern (NOTE: just use it when You choose Overlay style: pattern) |
Overlay Color |
Choose Overlay color (NOTE: just use when You choose Overlay style: color) |
Overlay Opacity |
Can enter value for Overlay opacity (NOTE: Value of Overlay Opacity: 0 ->1) |
Background Image |
Background image for device that not support background video. |
You can upload, delete or dragging and dropping to order videos.
NOTE: Video will be add from YouTube
Figure 3: Tab Video Playlist
Video Source |
Choose one source for your playlist |
Playlist video ID |
Can add or delete all Playlist video from YouTube |
Guide upload video:
EX:www.youtube.com/watch?v=azV0Y7v6wsg
Late you copy “azV0Y7v6wsg” paste on “Video ID” as image the following:
You can set Auto play, color, Volume, quality….for video controls
Figure 4: Tab Video controls
Auto play |
Choose Yes if you want the video auto play. If you choose No the background will display as an image. |
Show Control Bar |
Show(Auto- Hide)/Hide the controls bar |
Control Bar Color |
Set the background color of the control bar |
Progress Bar Color |
Set the background color of the progress bar |
Mute |
Can choose to play silent ambient background video |
Volume |
Set the volume to the supplied percent default is 50(%) |
Quality |
YouTube video quality |
Shuffle Videos |
Enable/Disable shuffle videos |
Playlist |
Show/Hide play list video |
This section provides extended options for you to configure JUX Background Video.
Figure 5: Tab Advanced Options
Wrapper Element |
Background will be transparent to this element (For example: body, #container…) |
Custom Css |
Custom CSS template. |
Enable jQuery |
On/Off jQuery loader. Turn it off if your site already has jQuery loaded. |
Enable noConfict |
On/Off noConflict. Turn it on to prevent conflict with Joomla’s Mootools. |
Eg for Custom Css:
.body .container,.footer{
background: none; }
.brand{
color: #ffffff
}
.well,.page-header{
border:none;
}
.page-header,hr{
display:none;
}