Hi,
The player on my site is a custom version of the plugin. Actually the miniAudioPlayer display can’t be modified as that one.
If you have letters instead of symbols that could be due to a CSS issue (one of your CSS class is overwriting the player one) or that the font is not loaded correctly by the site. Be sure that all the “mbaudio_font” are available in the CSS folder and have the correct permission. It seams, for some reasons, that on your site Firefox is not able to load the correct font.
The autoplay feature is not allowed on any mobile devices by the vendors.
Bye,
Matteo
Hello Matteo,
Thank you for your feedback, I will look into my css rules.
Btw, would you know how/where I can find out the names of the elements you are using so I refer to them in my custom css?
Btw, I am redirecting my site from http://myklippings.com to http://www.myklippings.com/ and had several issues with that in terms of finding paths. They cannot be relative so that might be the problem.
Monika
I think that the problem is that the “mbaudio_font” is unreachable on your site from the CSS inclusion.
On the head of the miniplayer.css file there are two font inclusion:
@font-face {
font-family: 'mb_audio_fontRegular';
src: url('mbAudioFont/mbaudio_font.eot');
src: local('?'), url('mbAudioFont/mbaudio_font.woff') format('woff'),
url('mbAudioFont/mbaudio_font.ttf') format('truetype'),
url('mbAudioFont/mbaudio_font.svg#webfontywr4YLri') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSansMonoRegular';
src: url('DroidSansMono/DroidSansMono.eot');
src: local('?'), url('DroidSansMono/DroidSansMono.woff') format('woff'),
url('DroidSansMono/DroidSansMono.ttf') format('truetype'),
url('DroidSansMono/DroidSansMono.svg#webfontGzFJ3WpO') format('svg');
font-weight: normal;
font-style: normal;
}
But for some reason the are not loaded on your site.
I see the font is in the plug in folder so it’s local. How does it get sourced? Where in the style sheet does that define the link to the folder?
For instance, this is how I source my other fonts, with an absolute link to the folder.
@font-face {
font-family: 'tall_filmsregular';
src: url('http://www.myklippings.com/wp-content/themes/pinboardchild/fonts/tall_film-webfont.eot');
src: url('http://www.myklippings.com/wp-content/themes/pinboardchild/fonts/tall_film-webfont.eot?#iefix') format('embedded-opentype'),
url('http://www.myklippings.com/wp-content/themes/pinboardchild/fonts/tall_film-webfont.woff') format('woff'),
url('http://www.myklippings.com/wp-content/themes/pinboardchild/fonts/tall_film-webfont.ttf') format('truetype'),
url('http://www.myklippings.com/wp-content/themes/pinboardchild/fonts/tall_film-webfont.svg#tall_filmsregular') format('svg');
}
CSS files refer to all their inclusions (images, fonts,…) considering themselves and not the page that includes it as start point. That’s why paths are relative to the CSS file.
Anyway you can try changing them with the absolute one and test if it works.
Bye,
Matteo
