Our Vid.ly service offers many ways to create your own look, feel, and branding of the player. Below we explain how to change the player button to the image of your choice. To view our complete CSS documentation, please view the following link: http://api.vid.ly/#VidlyPlayerCSSGuide.

Self hosted option

Should you wish to change the look and feel of the player, your embed must reference the hosted .css file:

<iframe frameborder="0"
allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen
width="640" height="360"name="vidly-frame"
src="http://s.vid.ly/embeded.html?link=*****&new=1&autoplay=false&style=[absolute_path_to_css_file]">
<a target="_blank" href="http://vid.ly/****&style=http://cf.cdn.vid.ly/*****/style.css">
<img src="http://s.vid.ly/****/poster" /></a></iframe>

NOTE: Please look to the ‘style=’ attribute for where to place the absolute path of the hosted .css file.

Through the UI

Follow these steps to customize your Vid.ly in the Encoding.com user interface:

1. Browse to https://manage.encoding.com/user/vidly.php
2. Select ‘Customize’ and download the .css documenation
3. Customize as needed
4. Select file, and upload in the same tab.
5. Your embed will be as follows: http://cf.cdn.vid.ly/*****/style.css –> Please substitute your shortlink in the place of *****

Embed your code as follows:

<iframe frameborder="0"
allowfullscreen webkitallowfullscreen mozallowfullscreen msallowfullscreen
width="640" height="360" name="vidly-frame"
src="http://s.vid.ly/embeded.html?link=*****&new=1&autoplay=false&style=http://cf.cdn.vid.ly/*****/style.css">
<a target="_blank" href="http://vid.ly*****&style=http://cf.cdn.vid.ly/*****/style.css">
<img src="http://s.vid.ly/*****/poster" /></a></iframe>

NOTE: Please pay special attention to the style= attribute.

Further customization of images

You can use absolute paths for customization of images. Have a look at the relative path here:

.vidly-skin .vidjs-big-play-button {
    display: block;
    background: url('../images/player/play-big-normal.png') no-repeat ;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 95px;
    height: 80px;
    margin: -43px 0 0 -43px;
    text-align: center;
    vertical-align: center;
    cursor: pointer !important;
}

You can customize to an absolute path as follows:

.vidly-skin .vidjs-big-play-button {
   display: block;
   background: url('http://mydomain.com/myplaybutton.png') no-repeat ;
   position: absolute;
    top: 50%;
    left: 50%;
    width: 95px;
    height: 80px;
    margin: -43px 0 0 -43px;
    text-align: center;
    vertical-align: center;
    cursor: pointer !important;
}

(3 votes, average: 4.00 out of 5)

Loading...