Configuring to the Best
Yendif Player presents a vast range of configuration options that allow you to customize the video player as per your needs. The following chart shows the available properties you can use:
| Properties | Description | Possible values | Default value | |
|---|---|---|---|---|
| theme(skin) | Two skin colors are available. Pick the best one for your website. | black | white | black |
| engine | Default playback engine. | html5 | flash | flash |
| responsive | Enable or disable responsive scaling. | 0 | 1 | 0 |
| ratio | Determine how much of the width should be taken as the height. Applicable only when the responsive option is enabled. | 0 to 1 | 0.5625 | |
| autoplay | Start the playback automatically or wait for the user input. | 0 | 1 | 0 |
| loop | If enabled, the player will start playback again from the beginning once the video is completed. | 0 | 1 | 0 |
| volume | The playback’s default volume level. | 0 to 1 | 0.5 | |
| playbtn | Show or hide the big play button in the middle of the video player. | 0 | 1 | 1 |
| controlbar | Show or hide the player controls. | 0 | 1 | 1 |
| playpause | Show or hide the play/pause control from the controlbar. | 0 | 1 | 1 |
| currenttime | Show or hide the current playback time's display. | 0 | 1 | 1 |
| progress | Show or hide the progress bar. | 0 | 1 | 1 |
| duration | Show or hide the video's total duration. | 0 | 1 | 1 |
| volumebtn | Show or hide the volume control. | 0 | 1 | 1 |
| fullscreen | Show or hide the fullscreen button. This is valid only for video. | 0 | 1 | 1 |
| embed | Show or hide the embed option. This is valid only for video. | 0 | 1 | 1 |
| playlistPosition | Position of the playlist. In cases of audio, the playlist is always set at the bottom. | right | bottom | right |
| playlistWidth | Width of the playlist. This is used only when the playlist's position is "right". | A numeric value | 250 | |
| playlistHeight | Height of the playist. This is used only when the playlist's position is "bottom". | A numeric value | 125 | |
| autoplaylist | If set to 1, the player will start playing the next media automatically after the current playback completes. | 0 | 1 | 1 |
| keyboard | Enable or disable keyboard controls. | 0 | 1 | 1 |
| analytics | Your google analytics UA code. | |||
There are still more properties which are explained in separate document sections,
Yendif Player can be configured in 3 ways. Pick a method that meets your needs.
Selective HTML configuration
This method can be used when the player is installed automatically. You can define configuration properties in HTML code directly using the "data-" prefix.
<div class="yendifplayer" data-engine="flash" data-volume="0.5">
<video autoplay>
<source type="video/mp4" src="http://mysite.com/video.mp4">
</video>
</div>
Selective JavaScript configuration
You can use this method to configure certain players on the site in combination with manual installation once the document is ready.
$(function () {
// install player into container elements of class="selected"
$(".selected").yendifplayer({
// configuration for this player
autoplay: 1
});
});
Global Javascript configuration
Imagine you have more than one player on the same site. Though a few properties might be common for every player, it may not be a good idea to use the previous two configuration methods. It is better to provide global settings for every player on the page.
<!-- global options -->
<script>
yendifplayer.config = {
engine: "flash",
license: ''
};
</script>
The yendifplayer.config object involves default configuration for Yendif Player. These setting should be made right after you have included the player in your page (with script src). You can have these in an external JavaScript file having the site logic.
Every player will have these settings as default, but you can override them for individual players using selective configuration methods.