Jak zmienić wygląd jPlayer 2.9.2 for jQuery ?

Question

Witam jak dokonać zmiany na tym playerze? Całość mogłaby iść na środek. Czas piosenki rozciągnięty praktycznie na całość z tym że w rozdzielczości na telefon pasował dalej. Pomiędzy  czerwonymi kreskami większy dystans ? Kiedy próbuje coś zmienić rozwala mi się wszystko... nie wiem na jakiej zasadzie jest tworzony takie coś pochodzące z jednego dużego obrazu - jplayer.pink.flag.jpg oraz małego jplayer.pink.flag.seeking.gif

Link z playerm

player.css

Answer 1

Tak to ma wyglądać?

 

jplayer.css  (zmodyfikowany)

 /*! Pink Flag Skin for jPlayer 2.9.2 ~ (c) 2009-2014 Happyworm Ltd ~ MIT License */
.jp-audio :focus,
.jp-audio-stream :focus,
.jp-video :focus{
outline:0
}

.jp-audio button::-moz-focus-inner,
.jp-audio-stream button::-moz-focus-inner,
.jp-video button::-moz-focus-inner{
border:0
}

.jp-audio,
.jp-audio-stream,
.jp-video{
font-size:20px;
font-family:Verdana,Arial,sans-serif;
line-height:23px;
color:#fff;
border:3px solid #111;
border-radius:15px;
background-color:#222;
box-shadow:0 0px 20px 0px #000 inset;
}

.jp-audio div{
transition:all .0s ease-in-out;		
}
.jp-audio div a{
transition:all .0s ease-in-out;		
}

.jp-audio{
min-width:300px;	
max-width:900px;
padding:25px
}

.jp-audio-stream{
width:101px;
padding:20px 20px 10px
}

.jp-video-270p{
width:480px
}

.jp-video-360p{
width:640px
}

.jp-video-full{
width:480px;
height:270px;
position:relative
}

.jp-video-full div div{
z-index:1000
}

.jp-video-full .jp-jplayer{
position:relative;
top:0;
left:0; 
overflow:hidden;
}

.jp-video-full .jp-gui{
position:static;
top:0;
left:0;
width:100%;
height:100%;
z-index:1001;
}

.jp-video-full .jp-interface{
position:relative;
bottom:0;
left:0
}

.jp-interface{
 display:flex;
 flex-direction:column;
 justify-content:center;
 position:relative;
 /*width:201px; */
 background-color:#222;
}

.jp-video .jp-controls-holder{
clear:both;
width:440px;
margin:0 auto 10px;
position:relative;
overflow:hidden
}

.jp-audio .jp-controls-holder{
height:80px
}

.jp-audio-stream .jp-controls-holder{
height:50px
}

.jp-controls{
 background:url(../img/jplayer.pink.flag.jpg) no-repeat;
 overflow:hidden;
 width:225px;
 height:34px
}

.jp-audio .jp-controls,
.jp-audio-stream .jp-controls{
margin:0 auto
}

.jp-audio-stream .jp-controls{
width:100px
}

.jp-video .jp-controls{
margin:0 0 0 115px;
display:inline
}

.jp-controls button{
 display:block;
 float:left;
 overflow:hidden;
 text-indent:-9999px;
 height:34px;
 margin:0;
 padding:0;
 border:none;
 cursor:pointer
}
.jp-controls button + button{
 margin-left: .72em;
}
.jp-type-single .jp-controls button{
width:99px
}

.jp-type-single .jp-play{
background:url(../img/jplayer.pink.flag.jpg) 0 -40px no-repeat
}

.jp-type-single .jp-play:focus{
background:url(../img/jplayer.pink.flag.jpg) -100px -40px no-repeat
}

.jp-state-playing .jp-type-single .jp-play{
background:url(../img/jplayer.pink.flag.jpg) 0 -120px no-repeat
}

.jp-state-playing .jp-type-single .jp-play:focus{
background:url(../img/jplayer.pink.flag.jpg) -100px -120px no-repeat
}

.jp-audio-stream .jp-pause,.jp-audio-stream .jp-play{
border-right:1px solid #180920
}

.jp-type-single .jp-stop{
background:url(../img/jplayer.pink.flag.jpg) 0 -80px no-repeat
}

.jp-type-single .jp-stop:focus{
background:url(../img/jplayer.pink.flag.jpg) -100px -80px no-repeat
}

.jp-type-playlist .jp-controls button{
width:49px
}

.jp-type-playlist .jp-play{
background:url(../img/jplayer.pink.flag.jpg) -24px -40px no-repeat
}

.jp-type-playlist .jp-play:focus{
background:url(../img/jplayer.pink.flag.jpg) -124px -40px no-repeat
}

.jp-state-playing div.jp-type-playlist .jp-play{
background:url(../img/jplayer.pink.flag.jpg) -24px -120px no-repeat
}

.jp-state-playing div.jp-type-playlist .jp-play:focus{
background:url(../img/jplayer.pink.flag.jpg) -124px -120px no-repeat
}

.jp-type-playlist .jp-stop{
background:url(../img/jplayer.pink.flag.jpg) -24px -80px no-repeat
}

.jp-type-playlist .jp-stop:focus{
background:url(../img/jplayer.pink.flag.jpg) -124px -80px no-repeat
}

.jp-type-playlist .jp-previous{background:url(../img/jplayer.pink.flag.jpg) -24px -200px no-repeat;}

.jp-type-playlist .jp-previous:focus{
background:url(../img/jplayer.pink.flag.jpg) -124px -200px no-repeat
}

.jp-type-playlist .jp-next{
background:url(../img/jplayer.pink.flag.jpg) -24px -160px no-repeat
}

.jp-type-playlist .jp-next:focus{
background:url(../img/jplayer.pink.flag.jpg) -124px -160px no-repeat
}

.jp-toggles{
padding:0;
margin:0 auto;
overflow:hidden
}

.jp-audio .jp-toggles{
width:55px
}

.jp-audio .jp-type-single .jp-toggles{
width:25px
}

.jp-video .jp-toggles{
float:left;
width:105px;
margin:10px 0 0 15px
}

.jp-toggles button{
display:block;
float:left;
width:25px;
height:18px;
text-indent:-9999px;
line-height:100%;
border:none;
cursor:pointer
}

.jp-full-screen{
background:url(../img/jplayer.pink.flag.jpg) 0 -420px no-repeat;
margin-left:15px
}

.jp-full-screen:focus{
background:url(../img/jplayer.pink.flag.jpg) -30px -420px no-repeat
}

.jp-state-full-screen .jp-full-screen{
background:url(../img/jplayer.pink.flag.jpg) -60px -420px no-repeat
}

.jp-state-full-screen .jp-full-screen:focus{
background:url(../img/jplayer.pink.flag.jpg) -90px -420px no-repeat
}

.jp-repeat{
background:url(../img/jplayer.pink.flag.jpg) 0 -440px no-repeat;
margin-left:0
}

.jp-repeat:focus{
background:url(../img/jplayer.pink.flag.jpg) -30px -440px no-repeat
}

.jp-state-looped .jp-repeat{
background:url(../img/jplayer.pink.flag.jpg) -60px -440px no-repeat
}

.jp-state-looped .jp-repeat:focus{
background:url(../img/jplayer.pink.flag.jpg) -90px -440px no-repeat
}

.jp-shuffle{
background:url(../img/jplayer.pink.flag.jpg) 0 -460px no-repeat;
margin-left:15px
}

.jp-shuffle:focus{
background:url(../img/jplayer.pink.flag.jpg) -30px -460px no-repeat
}

.jp-state-shuffled .jp-shuffle{
background:url(../img/jplayer.pink.flag.jpg) -60px -460px no-repeat
}

.jp-state-shuffled .jp-shuffle:focus{
background:url(../img/jplayer.pink.flag.jpg) -90px -460px no-repeat
}

.jp-audio .jp-shuffle{
margin-left:5px
}

div.jp-seeking-bg{
background:url(../img/jplayer.pink.flag.seeking.gif)
}

.jp-progress{background:url(../img/jplayer.pink.flag.jpg) 0 -240px no-repeat;/* width:197px; */height:13px;padding:0 2px 2px;margin-bottom:4px;overflow:hidden}

div.jp-video .jp-progress{
border-top:1px solid #180a1f;
border-bottom:1px solid #554560;
width:100%;
background-image:none;
padding:0
}

.jp-seek-bar{
background:url(../img/jplayer.pink.flag.jpg) 0 -260px repeat-x;
width:0;
height:100%;
overflow:hidden;
cursor:pointer
}

.jp-play-bar{
background:url(../img/jplayer.pink.flag.jpg) 0 -280px repeat-x;
width:0;
height:100%;
overflow:hidden
}

.jp-state-no-volume .jp-volume-controls{
display:none
}

.jp-audio .jp-volume-controls,
.jp-audio-stream .jp-volume-controls{
 position: relative;
 width:220px;
 height:30px;
 margin: auto;
}

.jp-volume-controls button{
position:absolute;
display:block;
overflow:hidden;
text-indent:-9999px;
margin:0;
padding:0;
width:16px;
height:11px;
border:none;
cursor:pointer
}

.jp-audio .jp-volume-controls .jp-mute,
.jp-audio-stream .jp-volume-controls .jp-mute{
top:-6px;
left:0
}

.jp-audio .jp-volume-controls .jp-volume-max,
.jp-audio-stream .jp-volume-controls .jp-volume-max{
top:-6px;
right:0
}

.jp-video .jp-volume-controls .jp-mute,
.jp-video .jp-volume-controls .jp-unmute{
left:0;
top:14px
}

.jp-video .jp-volume-controls .jp-volume-max{
left:84px;
top:14px
}

.jp-volume-controls .jp-mute{
background:url(../img/jplayer.pink.flag.jpg) 0 -330px no-repeat
}

.jp-volume-controls .jp-mute:focus{
background:url(../img/jplayer.pink.flag.jpg) -25px -330px no-repeat
}

.jp-state-muted .jp-volume-controls .jp-mute{
background:url(../img/jplayer.pink.flag.jpg) -60px -330px no-repeat
}

.jp-state-muted .jp-volume-controls .jp-mute:focus{
background:url(../img/jplayer.pink.flag.jpg) -85px -330px no-repeat
}

.jp-volume-controls .jp-volume-max{
background:url(../img/jplayer.pink.flag.jpg) 0 -350px no-repeat
}

.jp-volume-controls .jp-volume-max:focus{
background:url(../img/jplayer.pink.flag.jpg) -25px -350px no-repeat
}

.jp-volume-bar{
background:url(../img/jplayer.pink.flag.jpg) 0 -320px repeat-x;
position:absolute;
width:220px;
height:4px;
padding:2px 2px 1px;
overflow:hidden;
cursor:pointer
}

.jp-audio .jp-interface .jp-volume-bar,.jp-audio-stream .jp-interface .jp-volume-bar{
top:10px;
left:0
}

.jp-audio-stream .jp-interface .jp-volume-bar{
width:97px;
border-right:1px solid #180920;
padding-right:1px
}

.jp-video .jp-volume-bar{
top:0;
left:0;
width:95px;
border-right:1px solid #180920;
padding-right:1px;
margin-top:30px
}

.jp-volume-bar-value{
background:url(../img/jplayer.pink.flag.jpg) 0 -320px repeat-x;
height:4px
}

.jp-current-time,.jp-duration{
width:70px;
font-size:14px;
color:#eee
}

.jp-current-time{float:left;cursor:default}

.jp-duration{float:right;text-align:right;cursor:pointer}

.jp-video .jp-current-time{
padding-left:20px
}

.jp-video .jp-duration{
padding-right:20px
}

.jp-details{
font-size:.7em;
margin:0;
padding:0
}

.jp-details .jp-title{
padding:0;
margin:0;
overflow:hidden;
text-align:center;
cursor:default
}

.jp-video .jp-details{
margin:0 90px 10px
}

.jp-playlist ul{
list-style-type:none;
font-size:15px;
margin:0;
padding:0
}

.jp-video .jp-playlist ul{
margin:0 20px
}

.jp-playlist li{
position:relative;
padding:2px 0;
border-top:1px solid #222;
border-bottom:1px solid #333;
overflow:hidden
}
div.jp-type-playlist{
  display:flex;
 flex-direction:column;
 justify-content:center;
}
div.jp-type-playlist div.jp-playlist li:first-child{
border-top:none;
padding-top:3px
}

div.jp-type-playlist div.jp-playlist li:last-child{
border-bottom:none;
padding-bottom:3px
}

div.jp-type-playlist div.jp-playlist a{
color:#eee;
text-decoration:none
}

div.jp-type-playlist div.jp-playlist a:hover{
color:#bf00ff;
}

div.jp-type-playlist div.jp-playlist li.jp-playlist-current{
background-color:#000;
margin:0 -20px;
padding:2px 20px;
border-top:1px solid #9900cc;
border-bottom:1px solid #9900cc;
}

div.jp-type-playlist div.jp-playlist li.jp-playlist-current a{
color:#bf00ff;
}

div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove{
float:right;
display:inline;
text-align:right;
margin-left:10px;
font-weight:700;
color:#8C7A99;
}

div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover{
color:#E892E9
}

div.jp-type-playlist div.jp-playlist span.jp-free-media{
float:right;
display:inline;
text-align:right;
color:#888;
font-size:16px;
}

div.jp-type-playlist div.jp-playlist span.jp-free-media a{
color:#888
}

div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{
color:#fff
}

span.jp-artist{
font-size:.8em;
color:#8C7A99
}

.jp-video .jp-video-play{
width:100%;
overflow:hidden
}

.jp-video-270p .jp-video-play{
margin-top:-270px;
height:270px
}

.jp-video-360p .jp-video-play{
margin-top:-360px;
height:360px
}

.jp-video-full .jp-video-play{
height:100%
}

.jp-video-play-icon{
position:relative;
display:block;
width:112px;
height:100px;
margin-left:-56px;
margin-top:-50px;
left:50%;
top:50%;
border:none;
cursor:pointer;
background:url(../img/jplayer.pink.flag.video.play.png) no-repeat;
text-indent:-9999px
}

.jp-video-play-icon:focus{
background:url(../img/jplayer.pink.flag.video.play.png) 0 -100px no-repeat
}

.jp-jplayer,.jp-jplayer audio{
width:0;
height:0
}

.jp-jplayer{
background-color:#000
}

.jp-no-solution{
padding:5px;
font-size:.8em;
background-color:#3a2a45;
border-top:2px solid #554461;
border-left:2px solid #554461;
border-right:2px solid #180a1f;
border-bottom:2px solid #180a1f;
color:#FFF;
display:none
}

.jp-no-solution a{
color:#FFF
}

.jp-no-solution span{
font-size:1em;
display:block;
text-align:center;
font-weight:700
}

 

Comments

tutaj pomiędzy przyciskami (play, stop...) widać jakieś odcienie szarości nie da się tego skasować i x2 większy dystans ? Pod spodem pasek długości utworu z 10pix w dół od tych przycisków (na telefonie idzie źle kliknąć). Pod paskiem długości utworu kolejne dwa przyciski znowu (też penie ok. 10pix w dół) i między nimi dystans 10pix. W sumie ta długość odtwarzanego tracku mogłaby zachować jakiś max x2 dłuży i nie więcej. to chyba wyszłoby ok. 400pix 

.jp-progress{
background:url(../img/jplayer.pink.flag.jpg) 0 -240px no-repeat;
width:400px;

 

Zaraz spróbuje sprawdzić co zrobiłeś :D  Na pewno jest lepiej niż był, bo ładnie na środku i przyciski mają po bokach większy dystans. Kurde znalazłem twoją zmianę np. 

.jp-controls button + button{
 margin-left: .72em;
}

jednak jak coś zmieniam od razu rozlatuje się cały wygląd. Ten player widać został źle zrobiony jeśli chodzi o dostosowanie wyglądu pod siebie...  

---

@VBService, 

widzę że u CB lekkie defekty powychodziły także widać że ten player zjebany do zmian 

---

widać że ten player zjebany do zmian 

nie prawda, dzieje się tak na ta chwilę, bo korzysta z grafiki wycinanej z tego obrazka

trzeba bardziej precyzyjnie dobierać wielkości dla wycinanych fragmentów z obrazka.

---

ok spoko. ja to się pierwszy raz z czymś takim spotkałem żeby z obrazka wyciągać. ale też chyba kiedyś grafikę do gier z czegoś takiego brali. może jest jakiś lepszy darmowy player niż ten ?   Ja w nim potrafiłem kolory pozmieniać bo był fioletowy :P

---

Sprawdź to

jplayer.css

 /*! Pink Flag Skin for jPlayer 2.9.2 ~ (c) 2009-2014 Happyworm Ltd ~ MIT License */
.jp-audio :focus,
.jp-audio-stream :focus,
.jp-video :focus{
 outline:0
}

.jp-audio button::-moz-focus-inner,
.jp-audio-stream button::-moz-focus-inner,
.jp-video button::-moz-focus-inner{
 border:0
}

.jp-audio,
.jp-audio-stream,
.jp-video{
 font-size:20px;
 font-family:Verdana,Arial,sans-serif;
 line-height:23px;
 color:#fff;
 border:3px solid #111;
 border-radius:15px;
 background-color:#222;
 box-shadow:0 0px 20px 0px #000 inset;
}

/* --------- zmiana --------- */
.jp-interface{
 display:flex;
 flex-direction:column;
 position:relative;
 width:100%;
 background-color:#222;
}

.jp-audio div{
transition:all .0s ease-in-out;		
}
.jp-audio div a{
transition:all .0s ease-in-out;		
}

.jp-audio{
min-width:300px;	
max-width:900px;
padding:25px
}

.jp-audio-stream{
width:101px;
padding:20px 20px 10px
}

.jp-video-270p{
width:480px
}

.jp-video-360p{
width:640px
}

.jp-video-full{
width:480px;
height:270px;
position:static!important;
position:relative
}

.jp-video-full div div{
z-index:1000
}

.jp-video-full .jp-jplayer{
top:0;
left:0;
position:fixed!important;
position:relative;
overflow:hidden
}

.jp-video-full .jp-gui{
position:fixed!important;
position:static;
top:0;
left:0;
width:100%;
height:100%;
z-index:1001
}

.jp-video-full .jp-interface{
position:absolute!important;
position:relative;
bottom:0;
left:0
}

.jp-video .jp-controls-holder{
clear:both;
width:440px;
margin:0 auto 10px;
position:relative;
overflow:hidden
}

.jp-audio .jp-controls-holder{
height:100px
}

.jp-audio-stream .jp-controls-holder{
height:50px
}
/* --------- zmiana --------- */
.jp-controls{
 display:flex;
 justify-content:space-between;
 padding:.5rem;
 overflow:hidden;
 width:260px;
 height:34px;
}

.jp-audio .jp-controls,.jp-audio-stream .jp-controls{
margin:0 auto
}

.jp-audio-stream .jp-controls{
width:100px
}

.jp-video .jp-controls{
margin:0 0 0 115px;
float:left;
display:inline
}

.jp-controls button{
display:block;
float:left;
overflow:hidden;
text-indent:-9999px;
height:34px;
margin:0 1px 2px 0;
padding:0;
border:none;
cursor:pointer
}

.jp-type-single .jp-controls button{
width:99px
}

.jp-type-single .jp-play{
background:url(../img/jplayer.pink.flag.jpg) 0 -40px no-repeat
}

.jp-type-single .jp-play:focus{
background:url(../img/jplayer.pink.flag.jpg) -100px -40px no-repeat
}

.jp-state-playing .jp-type-single .jp-play{
background:url(../img/jplayer.pink.flag.jpg) 0 -120px no-repeat
}

.jp-state-playing .jp-type-single .jp-play:focus{
background:url(../img/jplayer.pink.flag.jpg) -100px -120px no-repeat
}

.jp-audio-stream .jp-pause,.jp-audio-stream .jp-play{
border-right:1px solid #180920
}

.jp-type-single .jp-stop{
background:url(../img/jplayer.pink.flag.jpg) 0 -80px no-repeat
}

.jp-type-single .jp-stop:focus{
background:url(../img/jplayer.pink.flag.jpg) -100px -80px no-repeat
}

.jp-type-playlist .jp-controls button{
width:49px
}

.jp-type-playlist .jp-play{
background:url(../img/jplayer.pink.flag.jpg) -24px -40px no-repeat
}

.jp-type-playlist .jp-play:focus{
background:url(../img/jplayer.pink.flag.jpg) -124px -40px no-repeat
}

.jp-state-playing div.jp-type-playlist .jp-play{
background:url(../img/jplayer.pink.flag.jpg) -24px -120px no-repeat
}

.jp-state-playing div.jp-type-playlist .jp-play:focus{
background:url(../img/jplayer.pink.flag.jpg) -124px -120px no-repeat
}

.jp-type-playlist .jp-stop{
background:url(../img/jplayer.pink.flag.jpg) -24px -80px no-repeat
}

.jp-type-playlist .jp-stop:focus{
background:url(../img/jplayer.pink.flag.jpg) -124px -80px no-repeat
}

.jp-type-playlist .jp-previous{
background:url(../img/jplayer.pink.flag.jpg) -24px -200px no-repeat
}

.jp-type-playlist .jp-previous:focus{
background:url(../img/jplayer.pink.flag.jpg) -124px -200px no-repeat
}

.jp-type-playlist .jp-next{
background:url(../img/jplayer.pink.flag.jpg) -24px -160px no-repeat
}

.jp-type-playlist .jp-next:focus{
background:url(../img/jplayer.pink.flag.jpg) -124px -160px no-repeat
}

.jp-toggles{
padding:0;
margin:0 auto;
overflow:hidden
}

.jp-audio .jp-toggles{
 display:flex;
 justify-content:space-between;
 width:75px;
}

.jp-audio .jp-type-single .jp-toggles{
width:25px
}

.jp-video .jp-toggles{
float:left;
width:105px;
margin:10px 0 0 15px
}

.jp-toggles button{
display:block;
float:left;
width:25px;
height:18px;

text-indent:-9999px;
line-height:100%;
border:none;
cursor:pointer
}

.jp-full-screen{
background:url(../img/jplayer.pink.flag.jpg) 0 -420px no-repeat;
margin-left:15px
}

.jp-full-screen:focus{
background:url(../img/jplayer.pink.flag.jpg) -30px -420px no-repeat
}

.jp-state-full-screen .jp-full-screen{
background:url(../img/jplayer.pink.flag.jpg) -60px -420px no-repeat
}

.jp-state-full-screen .jp-full-screen:focus{
background:url(../img/jplayer.pink.flag.jpg) -90px -420px no-repeat
}

.jp-repeat{
background:url(../img/jplayer.pink.flag.jpg) 0 -440px no-repeat;
margin-left:0
}

.jp-repeat:focus{
background:url(../img/jplayer.pink.flag.jpg) -30px -440px no-repeat
}

.jp-state-looped .jp-repeat{
background:url(../img/jplayer.pink.flag.jpg) -60px -440px no-repeat
}

.jp-state-looped .jp-repeat:focus{
background:url(../img/jplayer.pink.flag.jpg) -90px -440px no-repeat
}

.jp-shuffle{
background:url(../img/jplayer.pink.flag.jpg) 0 -460px no-repeat;
margin-left:15px
}

.jp-shuffle:focus{
background:url(../img/jplayer.pink.flag.jpg) -30px -460px no-repeat
}

.jp-state-shuffled .jp-shuffle{
background:url(../img/jplayer.pink.flag.jpg) -60px -460px no-repeat
}

.jp-state-shuffled .jp-shuffle:focus{
background:url(../img/jplayer.pink.flag.jpg) -90px -460px no-repeat
}

.jp-audio .jp-shuffle{
margin-left:5px
}

div.jp-seeking-bg{
background:url(../img/jplayer.pink.flag.seeking.gif)
}

.jp-progress{
 width:100%;
 height:13px;
 margin:.25rem auto;
 overflow:hidden;
}

div.jp-video .jp-progress{
border-top:1px solid #180a1f;
border-bottom:1px solid #554560;
width:100%;
background-image:none;
padding:0
}

.jp-seek-bar{
background:url(../img/jplayer.pink.flag.jpg) 0 -260px repeat-x;
width:0;
height:100%;
overflow:hidden;
cursor:pointer
}

.jp-play-bar{
background-image:linear-gradient(to bottom, #bf00ff, #141414);
width:0;
height:100%;
overflow:hidden
}

.jp-state-no-volume .jp-volume-controls{
display:none
}

/* --------- zmiana --------- */
.jp-audio .jp-volume-controls,
.jp-audio-stream .jp-volume-controls{
 display:flex;
 justify-content:center;
 height:1.2rem;
}

.jp-volume-controls button{
position:absolute;
display:block;
overflow:hidden;
text-indent:-9999px;
margin:0;
padding:0;
width:16px;
height:11px;
border:none;
cursor:pointer
}

/* --------- zmiana --------- */
.jp-audio .jp-volume-controls .jp-mute,
.jp-audio-stream .jp-volume-controls .jp-mute{
top:-6px;
left:4.8rem;
}
/* --------- zmiana --------- */
.jp-audio .jp-volume-controls .jp-volume-max,
.jp-audio-stream .jp-volume-controls .jp-volume-max{
top:-6px;
right:4.8rem;
}

.jp-video .jp-volume-controls .jp-mute,
.jp-video .jp-volume-controls .jp-unmute{
left:0;
top:14px
}

.jp-video .jp-volume-controls .jp-volume-max{
left:84px;
top:14px
}

.jp-volume-controls .jp-mute{
background:url(../img/jplayer.pink.flag.jpg) 0 -330px no-repeat
}

.jp-volume-controls .jp-mute:focus{
background:url(../img/jplayer.pink.flag.jpg) -25px -330px no-repeat
}

.jp-state-muted .jp-volume-controls .jp-mute{
background:url(../img/jplayer.pink.flag.jpg) -60px -330px no-repeat
}

.jp-state-muted .jp-volume-controls .jp-mute:focus{
background:url(../img/jplayer.pink.flag.jpg) -85px -330px no-repeat
}

.jp-volume-controls .jp-volume-max{
background:url(../img/jplayer.pink.flag.jpg) 0 -350px no-repeat
}

.jp-volume-controls .jp-volume-max:focus{
background:url(../img/jplayer.pink.flag.jpg) -25px -350px no-repeat
}

/* --------- zmiana --------- */
.jp-volume-bar{
 background-color: black;
 width:250px;
 height:5px;
 padding:0;
 margin:10px;
 overflow:hidden;
 cursor:pointer
}
.jp-volume-bar-value{
 background-color:#bf00ff;
 height:5px;
}

.jp-audio .jp-interface .jp-volume-bar,.jp-audio-stream .jp-interface .jp-volume-bar{
top:10px;
left:0
}

.jp-audio-stream .jp-interface .jp-volume-bar{
width:97px;
border-right:1px solid #180920;
padding-right:1px
}

.jp-video .jp-volume-bar{
top:0;
left:0;
width:95px;
border-right:1px solid #180920;
padding-right:1px;
margin-top:30px
}

.jp-current-time,.jp-duration{
width:70px;
font-size:14px;
color:#eee
}

.jp-current-time{
float:left;
cursor:default
}

.jp-duration{
float:right;
text-align:right;
cursor:pointer
}

.jp-video .jp-current-time{
padding-left:20px
}

.jp-video .jp-duration{
padding-right:20px
}

.jp-details{
font-size:.7em;
margin:0;
padding:0
}

.jp-details .jp-title{
padding:0;
margin:0;
overflow:hidden;
text-align:center;
cursor:default
}

.jp-video .jp-details{
margin:0 90px 10px
}

.jp-playlist ul{
list-style-type:none;
font-size:15px;
margin:0;
padding:0
}

.jp-video .jp-playlist ul{
margin:0 20px
}

.jp-playlist li{
position:relative;
padding:2px 0;
border-top:1px solid #222;
border-bottom:1px solid #333;
overflow:hidden
}

div.jp-type-playlist div.jp-playlist li:first-child{
border-top:none;
padding-top:3px
}

div.jp-type-playlist div.jp-playlist li:last-child{
border-bottom:none;
padding-bottom:3px
}

div.jp-type-playlist div.jp-playlist a{
color:#eee;
text-decoration:none
}

div.jp-type-playlist div.jp-playlist a:hover{
color:#bf00ff;
}

div.jp-type-playlist div.jp-playlist li.jp-playlist-current{
background-color:#000;
margin:0 -20px;
padding:2px 20px;
border-top:1px solid #9900cc;
border-bottom:1px solid #9900cc;
}

div.jp-type-playlist div.jp-playlist li.jp-playlist-current a{
color:#bf00ff;
}

div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove{
float:right;
display:inline;
text-align:right;
margin-left:10px;
font-weight:700;
color:#8C7A99;
}

div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover{
color:#E892E9
}

div.jp-type-playlist div.jp-playlist span.jp-free-media{
float:right;
display:inline;
text-align:right;
color:#888;
font-size:16px;
}

div.jp-type-playlist div.jp-playlist span.jp-free-media a{
color:#888
}

div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{
color:#fff
}

span.jp-artist{
font-size:.8em;
color:#8C7A99
}

.jp-video .jp-video-play{
width:100%;
overflow:hidden
}

.jp-video-270p .jp-video-play{
margin-top:-270px;
height:270px
}

.jp-video-360p .jp-video-play{
margin-top:-360px;
height:360px
}

.jp-video-full .jp-video-play{
height:100%
}

.jp-video-play-icon{
position:relative;
display:block;
width:112px;
height:100px;
margin-left:-56px;
margin-top:-50px;
left:50%;
top:50%;
border:none;
cursor:pointer;
background:url(../img/jplayer.pink.flag.video.play.png) no-repeat;
text-indent:-9999px
}

.jp-video-play-icon:focus{
background:url(../img/jplayer.pink.flag.video.play.png) 0 -100px no-repeat
}

.jp-jplayer,.jp-jplayer audio{
width:0;
height:0
}

.jp-jplayer{
background-color:#000
}

.jp-no-solution{
padding:5px;
font-size:.8em;
background-color:#3a2a45;
border-top:2px solid #554461;
border-left:2px solid #554461;
border-right:2px solid #180a1f;
border-bottom:2px solid #180a1f;
color:#FFF;
display:none
}

.jp-no-solution a{
color:#FFF
}

.jp-no-solution span{
font-size:1em;
display:block;
text-align:center;
font-weight:700
}

---

Przyciski(play, stop, next..) wyglądają dużo lepiej jednak przyciski głośnikowe się rozjeżdżają przy innych wielkościach plyera oraz długość odwietrzanego czasu rozciąga się całkiem bez maksymalnej długości np. 400px . Przyciski(czas również) pod czerwoną kresą o jeszcze  5px; Także jak mówiłem cieżko w tym playerze zmienić. 

     

---

rozciąga się całkiem bez maksymalnej długości np. 400px

można dopisać np. media queries, które dopasują bardziej elementy w zależności od dostępnej na ekranie rozdzielczości.

 

BTW, te 400px jest dość uniwersalne, można zostawić, powinno się prawidłowo wyświetlać nawet na małych ekranach

tu w zasadzie tylko do poprawki przyciski od głośności, i chyba wiem jak to poprawić bez używania wspomnianych wyżej media queries.

---

Wpisałem  400px; ale to i tak źle wygląda. Łatwiej chyba napisać nowy wygląd niż to coś przerabiać... jakieś małe zmiany chcę się wprowadzić i się sypie. Nie jest na środku na teflonie wygląda koszmarnie 

/* --------- zmiana --------- */
.jp-interface{
 display:flex;
 flex-direction:column;
 position:relative;
 width:400px;
 background-color:#222;
}

Jeszcze myślałem o zmianie kodu html ale sądzę że trzeba dać sb spokój, ongiś może znajdzie się coś lepszego :D  Dzięki za próby ;)