Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Player has no skin, just grey rectangles

I've followed the instructions to set up an audio embed, and I get two grey rectangles with numbers in between them. There are no controls visible, but the left grey rectangle appears to be play/pause and the right rectangle appears to be mute.

Here's a bare example:

http://new.avatarrepertorytheater.org/test.html

The mp3 file plays fine, and there's dozens of PNG files in the network activity log, no errors in there or in the console.

I have looked at this in: Linux: Chromium and Firefox, Windows: IE 11, Firefox, Chrome. All of them show the same thing.

I have also tried with a video and poster image -- the poster image does not show, and the same two grey rectangles are there instead of the control bar.

5 Community Answers

jherrieven

Best Answer 

Try changing the ID of your target DIV from "01spade" to "spade01".

CSS doesn't like selectors which start with a digit.

James Herrieven

View in conversation
Up Down

MisterNeutron

User  
0 rated :

Very bizarre, indeed. Usually this kind of problem arises out of a CSS conflict, but your test page isn't providing any of its own CSS, so that's not the case here.

A couple of things to try.... First, add a character encoding line immediately after the <head> tag:

<meta charset='UTF-8'>

Second, try setting up the page with the scripts self-hosted, instead of pulling them from JW.

Up Down

jherrieven

Best Answer  User  
0 rated :

Try changing the ID of your target DIV from "01spade" to "spade01".

CSS doesn't like selectors which start with a digit.

James Herrieven

Up Down

MisterNeutron

User  
0 rated :

Ah, yes! A sneaky problem that's easy to overlook.

Up Down

iain.mccracken

User  
0 rated :

Thank you very much, guys -- the leading digit in the id was the problem.

Changing it to "jwp01" renders the player properly :)))

Up Down

Randy

JW Player Support Agent  
0 rated :

Thanks again MisterNeutron/jherrieven for helping out.

This question has received the maximum number of answers.