I'm trying to alter the css stylesheet of this embed player, but I'm unable to do it so far...
Here's the default code:
<script type="text/javascript">
var zippywww="81";
var zippyfile="qHe0GQdg";
var zippytext="#000000";
var zippyback="#e8e8e8";
var zippyplay="#ff6600";
var zippywidth="100%";
var zippyauto=false;
var zippyvol=80;
var zippywave = "#ffffff";
var zippyborder = "#cccccc";
var a = navigator.userAgent||navigator.vendor||window.opera;
document.write("<iframe height='92' width='"+zippywidth+"' frameBorder='0' src='http://api.zippyshare.com/api/jplayer_embed.jsp?key="+zippyfile+"&server=www"+zippywww+"&width="+zippywidth+"'></iframe>");
</script>
The issue is that the CSS code is located inside the jplayer_embed.jsp file, which is called by the iframe.
I tried copying the source code of the .jsp, saving it into a new local .jsp file, so I can inject a different .css into it, but the player doesn't load the audio source.
Here's the source code of the .jsp (by using 'view page source'):
<html>
<head>
<link href="/css/jplayer.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//api.zippyshare.com/js/jquery/jquery.js"></script>
<script type="text/javascript" src="//api.zippyshare.com/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="//api.zippyshare.com/js/jquery.cookie.js"></script>
</head>
<body style="margin: 0; width: px;">
<div class="center" style="text-align: center;">
<div id="jquery_jplayer" class="jp-jplayer"></div>
<div id="jp_container" class="jp-audio" style="width: -182px;">
<div class="jp-type-single">
<div class="jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
</ul>
<div class="jp-time-holder">
<span class="jp-current-time"></span>
/
<span class="jp-duration"></span>
</div>
<div class="jp-progress" style="width:-82px;">
<div onclick="toggleSDHD();" class="hdsdtoggle sd-icon"></div>
<div class="jp-seek-bar">
<img src="//.zippyshare.com/wf//file.html" style="height: 100%; width: 100%; position: absolute;">
<img src="//.zippyshare.com/images/jplayer/player-overlay.png" style="height: 100%; width: 100%;">
<div class="jp-play-bar" style="position: absolute; top: 0px;"></div>
</div>
<a href="//.zippyshare.com/v//file.html" target="_blank"><div class="dwnbtn dwn-icon"></div></a>
</div>
</div>
<div class="jp-download" style="width:-2px; height: 0px; border-top: none;">
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
zippyhq = false || isFirefox;
if (isFirefox) {
$.each($(".hdsdtoggle"), function (idx, val) {
$(val).removeClass("sd-icon").addClass("hd-icon");
});
}
$("#jquery_jplayer").jPlayer({
ready: function (event) {
if (!zippyhq) {
$(this).jPlayer("setMedia", {
m4a: "//.zippyshare.com/audio//0/file.mp3"
});
} else {
$(this).jPlayer("setMedia", {
m4a: "//.zippyshare.com/audioHQ//0/file.mp3"
});
}
},
swfPath: "//api.zippyshare.com/js",
supplied: "m4a",
wmode: "window",
solution: "html, flash",
cssSelectorAncestor: "#jp_container"
});
toggleSDHD = function () {
if (isFirefox) {
return;
}
if (zippyhq) {
zippyhq = false;
$.cookie('zippyhq', "0", {expires:99999, domain: 'zippyshare.com', path: '/'});
$("#jquery_jplayer").jPlayer("setMedia", {
m4a: '//.zippyshare.com/audio//0/file.mp3'
});
$.each($(".hdsdtoggle"), function (idx, val) {
$(val).removeClass("hd-icon").addClass("sd-icon");
});
} else {
zippyhq = true;
$.cookie('zippyhq', "1", {expires:99999, domain: 'zippyshare.com', path: '/'});
$("#jquery_jplayer").jPlayer("setMedia", {
m4a: '//.zippyshare.com/audioHQ//0/file.mp3'
});
$.each($(".hdsdtoggle"), function (idx, val) {
$(val).removeClass("sd-icon").addClass("hd-icon");
});
}
};
});
</script>
</body>
</html>
Is there any way that this can be done?
You cannot bring changes to it. it will get the CSS from the original site.