This plugin requires at least WordPress 3.0
Step 1: Installation – https://www.youtube.com/watch?v=rAFJMLyKvvs
Step 2: Create a new player and manage the player settings – https://www.youtube.com/watch?v=XwNqOK0UCFE
Step 3: Manage the playlist and categories – https://www.youtube.com/watch?v=49Uo9JGm1wk
NEW: Automatically Obtain Thumbnail, Title & Description From YouTube Server - https://www.youtube.com/watch?v=r_NRQJ-uiKI
Step 1. Enter in your wordpress CMS and go to Plugins menu
Step 2. Under Plugins menu click "Add New"
Step 3. Select "Upload", choose the archive universal_video_player.zip that you downloaded and hit "Install Now"
Step 4. After the plugin is installed click "Activate Plugin"
Step 5. In you page just add the shortcode: [universal_video_player.zip settings_id='1']
click here for more details regarding the shortcode
css | the folder contains the .css files used by the pluging |
images | the folder contains the images used by the pluging |
js | the folder contains the .js files used by the pluging |
universal_video_player | the folder contains the .js & .css files that the video player use |
tpl | the folder contains the template files used by the pluging |
universal_video_player.php | the plugin itself |
From this section you can define the players.
If you need to include multiple players in your pages with different settings and playlist you can define the players and manage the settings for each one.
If you need only one player in your website, just edit the default one.
From this section you can define the video player settings.
General settings | |
Skin | Possible values: - whiteControllers - blackControllers |
Player Width | plugin width |
Player Height | plugin height |
Responsive |
Possible values: true - the plugin will responsive false - the plugin will not be responsive |
Responsive Relative To Browser | Possible values: true - the plugin will be responisve relatively to browser dimensions false - the plugin will be responisve relatively to parent div |
Center Player | Possible values: true - the player will be centered on the page false - the player will notbe centered on the page, it will be left align |
Automatically Obtain Thumb, Title & Description From YouTube Server | Possible values: true - the plugin will obtain the movie thumb, movie title and movie description from YouTube server IF in playlist code these data is missing false - the plugin will use the movie thumb, movie title and movie description defined in playlist code |
Shuffle | Possible values: true - the playlist will be played in shuffle mode false - the playlist will be played in normal mode |
Player Height | Define which video will be the first one to load. The counting starts from 0 |
Initial Volume | You can initialize the volume. The range is 0 to 1 |
Loop | Possible values: true - the plugin will loop the playlist when it reaches the end false - the plugin will stop when reaches the end |
Facebook AppID | FaceBook AppID. Please check Facebook Share section, for more informations |
Facebook Share Title | The title which will appear on FaceBook share. Please check Facebook Share section, for more informations |
Facebook Share Description | The description which will appear on FaceBook share. Please check Facebook Share section, for more informations |
Show Search | Possible values: true - the search area will appear false - the search area will not appear |
Search Area Bg | Search area background color (hexa) |
Search Input Text | Search input initial text, useful for translation purpose |
Search Input Bg | Search input background color (hexa) |
Search Input Border Color | Search input border color (hexa) |
Search Input Text Color | Search input text color (hexa) |
Player Border Color | border color (hexa) |
Controls Bg FullScreen Color | Controllers background color when the player is in full-screen mode (hexa) |
Show Logo | Show top,left logo Possible values: |
Logo Image Path | The path to the logo image |
Logo Link | The link which will be opened when the logo will be clicked |
Logo Target | Logo link target |
Auto-Play First Video | Possible values: true - the first video (if exists) will autoplay false - the first video (if exists) will not autoplay |
Auto-Play On Mobile | Possible values: true - the first video will autoplay on mobile devices false - the first video will not autoplay on mobile devices |
Top Title Color | The top,left movie title color (hexa) |
Timer Color | The top,right movie timer color (hexa) |
Buffer Empty Color | Movie buffer color, empty state (hexa) |
Buffer Full Color | Movie buffer color, full state (hexa) |
Seekbar Color | Movie seekbar color (hexa) |
Volume Off Color | Volume color, OFF state (hexa) |
Volume On Color | Volume color, ON state (hexa) |
Play But Color Off | Play/Pause button background color, OFF state (hexa) |
Play But Colo rOn | Play/Pause button background color, ON state (hexa) |
Show Top Title | Possible values: true - the top,left movie title will appear false - the top,left movie title will not appear |
Suggested Quality | ONLY FOR YOUTUBE. This parameter value can be: YouTube recommends that you set the parameter value to default, which instructs YouTube to select the most appropriate playback quality, which will vary for different users, videos, systems and other playback conditions. |
Show Timer | Possible values: true - the top,right movie timer will appear false - the top,right movie timer will not appear |
Activate Google Analytics Traking | Possible values: true - Google Analytics tracking will be enabled false - Google Analytics tracking will be disabled |
Your Google Analytics Traking Code |
Your Google Analytics code. Example: UA-3245593-1 |
Controllers Settings: Show/Hide buttons & elements | |
Show Rewind But | Possible values: true - rewind button will appear false - rewind button will not appear |
Show Play But | Possible values: true - play/pause button will appear false - play/pause button will not appear |
Show Volume But | Possible values: true - volume button will appear false - volume button will not appear |
Show Twitter But | Possible values: true - twitter button will appear false - twitter button will not appear |
Show Info But | Possible values: true - info button will appear false - info button will not appear |
Show Download But | Possible values: true - download button will appear false - download track button will not appear |
Show Playlis tBut | Possible values: true - show/hide playlist button will appear false - show/hide playlist button will not appear |
Show Fullscreen But | Possible values: true - fullscreen button will appear false - fullscreen button will not appear |
Show Shuffle But | Possible values: true - shuffle button will appear false - shuffle button will not appear |
Show NextPrevBut | Possible values: true - next/previous buttons will appear false - next/previous buttons will not appear |
Show Facebook But | Possible values: true - facebook button will appear false - facebook button will not appear |
Playlist Settings | |
Show Playlist On Init | Possible values: true - playlist will appear on initi false - playlist will not appear on init |
Playlist Width | The playlist width |
Playlist Scroller Bg Color OFF | The playlist scroll-bar OFF color (hexa) |
Playlist Scroller Bg Color ON | The playlist scroll-bar ON color (hexa) |
Number Of Thumbs Per Screen | the number of thumbs per screen. If you set it to 0, it will be calculated automatically. You can set a fixed number, for example 3 |
Show Thumbs | Possible values: true - the thumbs from playlist will appear false - the thumbs from playlist will not appear |
Show Title | Possible values: true - the tile from playlist will appear false - the tilte from playlist will not appear |
Show Description | Possible values: true - the description from playlist will appear false - the description from playlist will not appear |
Playlist Record Height | The playlist record height |
Playlist Record Padding | The playlist record padding |
Title Font Size | The playlist record title font size |
Title Line Height | The playlist record title line-height |
Desc Font Size | The playlist record decription font size |
Desc Line Height | The playlist record descripton line-height |
Playlist Record Bg Off Color | The playlist record background color (OFF state). |
Playlist Record Title Off Color | The playlist record title color (OFF state) |
Playlist Record Desc Off Color | The playlist record description color (OFF state) |
Playlist Record Bg Off Img Opacity | The playlist record opacity value (OFF state). It can take values between 0-100 |
Playlist Record Bg On Color | The playlist record background color (ON state). |
Playlist Record Title On Color | The playlist record title color (ON state) |
Playlist Record Desc On Color | The playlist record description color (ON state) |
Playlist Record Bg On Img Opacity | The playlist record opacity value (ON state). It can take values between 0-100 |
Playlist Bg Color | The playlist record background color. |
Playlist RecordTitleLimit | The playlist record title characters limit. All the other characters will be remoeved and replaced with ... |
Playlist RecordDescLimit | The playlist record description characters limit. All the other characters will be remoeved and replaced with ... |
Thumb Width | playlist thumbnail width (for skins that have a thumbnail) |
Thumb Height | playlist thumbnail height (for skins that have a thumbnail) |
Category Settings | |
Show Categs | Possible values: true - the categories will appear false - the categories will not appear |
First Selected Category | The name of the first displayed category (in the top of the playlist). If no value is selected, since the categories will be alphabetically ordered, the first one will be displayed as the first selected category |
Selected Categ Bg | Selected category background color (hexa) or 'transparent' value |
Selected Categ Off Color | Selected category color (hexa) - OFF state |
Selected Categ On Color | Selected category color (hexa) - ON state |
Category Record Bg Off Color | Category item background color (hexa) - OFF state |
Category Record Bg On Color | Category item background color (hexa) - ON state |
Category Record Bottom Border Off Color | Category item bottom border color (hexa) - OFF state |
Category Record Bottom Border On Color | Category item bottom border color (hexa) - ON state |
Category Record Text Off Color | Category item text color (hexa) - OFF state |
Category Record Text On Color | Category item text color (hexa) - ON state |
Title | video file title |
Description | video file description |
Category | video file category. An video file can belong to multiple categories |
Playlist image | video file playlist image |
YouTube | If you want to play a YouTube video on this slide, you'll insert the YouTube video ID. A YouTube link is of this form https://www.youtube.com/watch?v=5WAkvu5Tnkw The value of 'v' parameter is the ID you need. |
Vimeo | If you want to play a Vimeo video on this slide, you'll insert the Vimeo video ID. A Vimeo link is of this form https://vimeo.com/21288282 The last number of the link is the ID |
Self Hosted/Third Party Hosted Video .MP4 file | If you want to play a Self-Hosted video on this slide, you'll insert the path to the .mp4 file. You need to also add the path to the .webm file, to assure all browsers compatibility (please check the next parameter) |
Self Hosted/Third Party Hosted Video .WEBM file | If you want to play a Self-Hosted video on this slide, you'll insert the path to the .webm file. You need to also add the path to the .mp4 file, to assure all browsers compatibility (please check the previous parameter) |
Optional Start Time | Optional parameter to set the video start time |
Optional End Time | Optional parameter to set the video end time |
In order for the Facebook share button to work you need to obtain a Facebook Application ID
1. Go to the Facebook Developers Apps page and and sign in with your Facebook username and password.
2. Click the "Create New App" button.
If you do not see the option to create a new app in the upper right hand corner, click on "Register as Developer."
3. After that you'll obtain an 'App ID' which you'll paste in facebookAppID parameter when you'll initialize the player
jQuery('#video2_html5_white').video2_html5({
skin: 'whiteControllers',
facebookAppID:'YOUR_NEW_APPID',
playerWidth:500,
autoPlay:true
});
4. Go to Settings tab (left area), select 'Website' and insert your website URL
5. Go to App Review and set 'YES' for 'Do you want to make this app and all its live features available to the general public?'
6. To personalize more the share content you can use facebookShareTitle and facebookShareDescription parameters when you initialize the player. Please check Player Settings section, to see all available parameters
The shortcode is:
[universal_video_player.zip settings_id='1']
where
settings_id is the player ID defined in "Manage Players" section
OPTIONAL PARAMETERS:
videos_initial_ord - it can be used to define which video items, from the playlist, will appear in the player. It will take the value of the playlist item order.[universal_video_player.zip settings_id='1' videos_initial_ord='4,2,5'] - in this case, only the playlist items which have 4 or 2 or 5 as 'Initial Order' will be in the playlist
If you need to increase the wordpress media library upload file size limit add the following definitions in the .htaccess file
<IfModule mod_php5.c>
php_value post_max_size 10M
php_value upload_max_filesize 40M
php_value memory_limit 500M
</IfModule>