This plugin requires at least WordPress 3.0
Installation - https://www.youtube.com/watch?v=-yB_U6cGWMc
How To Create a Video Player- https://www.youtube.com/watch?v=ofm6pXQeoW4
How To Create a Video Background For Your Page- https://www.youtube.com/watch?v=EzQfnj7m7aY
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_and_bg.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_and_bg settings_id='1']
click here for more details regarding the shortcode
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 | |
| Player Width | plugin width |
| Player Height | plugin height |
| Width 100% | Possible values: true - the plugin width will be 100% false - the plugin width will be what you've set for 'width' parameter |
| Height 100% | Possible values: true - the plugin height will be 100% false - the plugin height will be what you've set for 'width' parameter |
| 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 |
| Set as Background |
Possible values: true - if you intend to use the plugin as full screen background false - if you intend to use the plugin as full screen gallery or full width slider |
| Auto-Play First Video | Possible values: true - the first video will autoplay false - the first video will not autoplay |
| Randomize Videos | Possible values: true - it will navigate the videos in a random manner false - it will navigate the videos as they are defined |
| First Video To Be Loaded | Define which video will be the first one to load. The counting starts from 0 |
| Loop | Possible values: true - the plugin will loop when reaches the end false - the plugin will stop when reaches the end |
| Texture Path | The path to the texture file. Please check 'full_screen_youtube.html' file as example. The plugin comes with 5 predefined textures which you can use '_resources/patternFullScreenBg_1.png', '_resources/patternFullScreenBg_2.png', '_resources/patternFullScreenBg_3.png', '_resources/patternFullScreenBg_4.png' and '_resources/patternFullScreenBg_5.png'. You can use any texture you want, just place here the path to the texture |
| Border Width | border width. Only for Fixed Width & Full Width versions |
| Border Color | border color (hexa). Only for Fixed Width & Full Width versions |
| Video Proportion Width | The video proportion is considered to be 16/9. If your video has another proportion, you can set a different value here. The height proportion will always be 9 |
| Suggested Quality | ONLY for YouTube. Available parameters:
For additional informations, please check: https://developers.google.com/youtube/iframe_api_reference#setPlaybackQuality |
| Initial Volume | the initial volume value. It takes values between 0-1 |
| Controllers Settings | |
| 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 |
| Bottom Navigation - margin-top | The vertical pozition of the bottom navigation area |
| Bottom Navigation Horizontal Position | Bottom navigation position Possible values: |
| Bottom Navigation Lateral Margin | Bottom navigation lateral (left/right) margin. It is useful is you set bottomNavPos:left or bottomNavPos:right |
| Bottom Navigation Minimal Height | Bottom navigation height area will not go beneath this value |
| Thumbs Wrapper Top Padding | Bottom navigation top padding |
| Thumbs Wrapper Bottom Padding | Bottom navigation bottom padding |
| Thumbs Wrapper Background (hexa) | The background of the bottom navigation area. Hexa color code, 'transparent' value |
| Thumbs Wrapper Background (Image) | The background of the bottom navigation area, image path. If an image is added, Thumbs Wrapper Background (hexa) is ignored |
| Thumbs Border Color ON | Thumbs Border Color ON State |
| Thumbs Border Color OFF | Thumbs Border Color OFF State |
| Thumbs Background OFF Color | The playlist record background color (OFF state). It can take 3 values: 1. hexa: thumbsBgOffColor:'#000000' |
| Thumbs Background OFF Img Opacity | The playlist image opacity value (OFF state). It can take values between 0-100 |
| Thumbs Background ON Color | The playlist record background color (ON state). It can take 3 values: 1. hexa: thumbsBgOffColor:'#cc181e |
| Thumbs Background ON Img Opacity | The playlist image opacity value (ON state). It can take values between 0-100 |
| Show Bottom Navigation | Possible values: true - the bottom navigation will appear false - the bottom navigation will not appear |
| Show Bottom Navigation On Init | Possible values: true - the bottom navigation will appear on first plugin init false - the bottom navigation will not appear on first plugin init |
| Auto Hide Bottom Navigation | Possible values: true - the bottom navigation will hide when mouse out and will appear on mouse over false - the bottom navigation will not hide when mouse out |
| Show Video Controls | Possible values: NOTE: Vimeo doesn't support this option |
| Thumb Width | the bottom navigation thumbnail width |
| Thumb Height | the bottom navigation thumbnail height |
| Thumbnail | The playlist thumbnail path |
| YouTube Video ID | If you want to play a YouTube video, 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 Video ID | If you want to play a Vimeo video, 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, you'll insert the path to the .mp4 file which can be a relative path or an URL. Don't forget to add .webm file if you want to play on Opera, too |
| Self Hosted/Third Party Hosted Video .WEBM file | If you want to play a self-hosted video, you'll insert the path to the .webm file which can be a relative path or an URL. Don't forget to add .mp4 file which is the main video file |
| Video Proportion Width | Only if is used as full-screen background. If a video has other proportion than 16/9, set the new with proportion. The height proportion will always be 9. This parameter will overwrite, only for this video, the general parameter 'Video Proportion Width' defined in Player Settings |
The shortcode is:
[universal_video_player_and_bg settings_id='1']
where
settings_id is the player ID defined in "Manage Players" section