JWplayer_seekBaar

Checking the customised seek bar

HTML

<script src="http://jwpsrv.com/library/3bMFypKqEeKK7CIACqYeXg.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<script src="http://www.digitalradio.ch/_img/slider_nav.png"></script>
<script src="http://www.resizr.com/resized/550e.jpg"></script>
<div id='my-video' style=""></div> 
       <div id="player_seek_bar">
		 <div id="seekBar"> 
		   <div id="seek_id" style="display: none;"></div>
		   <br>
		     <br>
		  
		    <div style="background: bottom no-repeat; left:50px; width: 50px;height:50px;font-family:Arial;font-size:20px;display: inline;font-weight:900;">
		    <div id="seek_position" class="seek_position" style="font-family:Bookman old style;font-size:60%;display: inline;font-weight:500;color:whitesmoke;top:110%;left:27%;z-index:3;position:absolute;"> </div>
		    </div>
		 </div>
	     </div>
             <br><div id="content" class="play" >
           <button name='play' id='play' value='play'>Play</button>
            <button name='pause' id='pause' value='pause' onclick='pause();' style='display: none;left:30%;position:absolute;>Pause</button>
        </div>

CSS

#seek_id{
       
  position: relative;
  left:118%;
  top: -10%;
  font-family:Arial;
  font-size:15px;
  font-weight:bolder;
}


#player_seek_bar{
  width:480px;
  height: 18px;    
  position: relative;
  top: 150px;
 
}
#seekBar {
  position: relative;
  /*bottom:155px;*/
 /* top:1%;*/
 bottom:819%;
  left: 10px;
  margin: 0 auto;
  height:17px;
  width: 480px;
  background:#cccccc;
 
}


#seekBar .ui-slider-range-min {
    bottom:10px;
  height:17px;
  width: 400px;
 top:5%;
  position: absolute;
  background :#ed1c24;
  border: none;
  outline: none;
}

#seekBar .ui-slider-handle {
    bottom:10px;
  width: 30px;
  height:30px;
  background: url('http://www.resizr.com/resized/550e.jpg') no-repeat left top;
  position: absolute;
  top:-10%;
  cursor: pointer;
  outline: none;
  border: none;
 
}

JavaScript

jwplayer('my-video').setup({
        file: 'http://youtu.be/5WmpJD3MwyU',
        width: '480',
        height: '270'
    });