The easiest way to change the position of elements is per drag and drop. Click on the element you want do move, hold the mouse pressed and drag it to an arbitrary position.

Another way to move elements is to do this with the arrow key on your keyboard. You have to click on the element you want to move to set the focus. After that you can use the arrow keys to move the element.

The third way is to set the coordinates in the edit-menu:

• Open the edit menu by clicking "edit"
• Select the element to be moved
• Change the x- and y-coordinates by typing an number

Watch demo

To change the video you have to do the following steps:

• Set the focus on the video. You can do this by clicking on the video or select "video" in the edit-menu.
• Open the edit-menu if it is not opened already.
• Now copy the url to your video into the "video source" textfield
  The video must be encoded in H.264. If you are not shure, just try it.
  You can also visit youtube.com and select your favourite video. Copy the url and past it in the "video source" textfield. Alternatively you can directly enter the youtube-video-id.

Ensure, that one video is not displayed parallely (e.g. on youtube and on your-videoplayer). This could cause problems.

Watch demo

The first thing you have to do is to design your video player skin with your favourite drawing-program. After that cut the elements you need and save them. The images must be in one of these formats: *.jpg, *.gif, *.png. Don't forget to design the different states of the elements. A button for example can have three different states. A default-state, a mouse-over-state and a mouse-down state. After you have cutted each element with its states you can upload them on your-videoplayer:

• To customize your own skin you need to log in. If you don't have an account you can easily create one. We only need a valid e-mail addres an a password
• Set the focus on the element you want to customize. You can do this by clicking on the element or select it in the edit-menu.
• The different states will be displayed.
• To upload your own customized elements simply click on the images of the predefined states.
• After that a dialog box will appear. Now you can select your own image on your harddisk.
• The selected image will be uploaded an the result will be displayed directly.

Don't forget to save your own skin when you finished uploading your images

Watch demo

There are two important things you have to consider while designing your own video player skin.

• Format of the images must be of one of these: *.jpg, *.gif, *.png
• A single image may not exceed the size of 10kb

The "clickable" functionality exists at the sliders of your video player. These are the progress-slider and the volume-slider.

The "clickable area" defines the area, which the user of your video player can click and drag to change the volume or the current play position.
It also defines the direction the slider works. So you are able to create volume- and progress-slider that work in an arbitrary area and an arbitrary angle.

To edit the "clickable area" follow these steps:

• Focus the progress- or volume-bar.
• Open the edit-menu.
• Click on the "show-checkbox". Now the "clickable area" is visible and can be edited. You can enter an angle with your keys on the keyboard or change the position and size of the "clickable area" as your are used to do from other elements.

If it is the first time you work with this function, it might be a little bit tricky to understand how it works.
Try it - you can't do anything wrong.

Watch demo

No all skins need all elements. The simplest video player for example just needs the video-element. So you can hide all elements you do not need:

• Set the focus on the element you want to hide by clicking on it or selecting it in the edit-menu.
• Open the edit-menu if it is not opened already.
• Disable the element by clicking on the "visible"-checkbox.

You can display hidden skin-elements in the same way.

Watch demo

You have to save all changes on your video player skin - except changes in the video-source.
To save changes click "save". After that a dialog box will appear. You can enter a name for your player. If you enter the name of an existing video player skin or select one from the displayed list the existing skin will be overwritten. Be careful - if you overwrite a skin, which is already embedded skin in a website the embedded player will be affected, too!

If you only changed the video-source you do not need to save the player skin. You can simply click on "embed" to generate the embed-code.

Watch demo

You have the possibility to load saved video player skins to edit them. To do this click on "load" an select one of your skins.

Don't forget to save changes!

Watch demo

To embed your video player skin you have to copy the embed-code and paste it in the sourcecode of your website or blog or whereever you want.

There are two ways to get the embed code for a specific video player skin:

• After you saved your own skin the embed-code will be displayed automatically.
• Alternative you can generate the embed-code by clicking "embed". Be careful - unsaved changes can not be observed.
  If you just changed the video-source you don't need to save.

Watch demo