Getting initial to work at the top of the code?



Would using font-size:0; work too?

or would that not be the appropriate code structure to use.

As I know, you have said to use this:


That was an old method that was used but I think some browsers ignore it.
Or it can be overridden in a user's custom stylesheet
such as...
* a {font-size: 1em;}

That will cause you the least headaches

-99em is not a magic number, it could be -999em


Just don't make it -9em, because the intention here is to push the element far away to the left, so that it doesn't appear on the screen. The more 9's you use the better. I've usually seen -9999em used, because that properly handles more situations than -999em, and isn't as stupidly large as -99999999em which might break due to max-number limits.


No you are missing the point altogether.

The js is adding the activated class to an element in the document. If the class was added to playbutton itself then the css would be as per the original. However in the revised code the activated class was added to .wrap instead so the css must change in order to target the required element.


I've never had any problems with -999
With the avg user's base font @ 16px that = 15,984px
That puts the hidden text on avg at least 14,000 px off the screen

Of course there could be issues with a widescreen TV monitor, but the display would be larger too. Should be similar results, just on a larger scale.


When using em's there's no trouble, but some people fail and use px instead.
-999px doesn't give enough safety, so using -9999 as the number helps to keep things safe regardless of whether em or px are used.


What are your thoughts on using visibility:hidden, or opacity: 0; to hide the text?

.linkse a:nth-of-type(8) {

.linkse a:nth-of-type(8) {
opacity: 0;

I understand there's a difference between the 2, but if one would be used, which one would be used in this circumstance?

Which would be enabled for screen readers?

visibility:hidden, or opacity: 0;


I just found this:

opacity: 0; won't hide content from screen readers, though it'll hide content from sighted users and partially sighted users. It's like displaying a white text on a white background (or transparent


There's some good details on the techniques to use, and why, over at the page about Invisible content just for Screen Readers


If the javascript works as is, why would I need @Paul_Wilkins to help me with it, if it already works?

You will need @Paul_Wilkins to help you with the JS but this gets it working with the css and html I posted


Good one - I'm glad to know that the scripting code is flexible enough to work without much modification.


What do I need to adjust in this code?

So it works like this?


Two key differences that I notice are that the first code doesn't clear the initial image, and it doesn't start playing the player.

Do you want it to start playing the player like the second code?




It looks like the title element is not being hidden when it's supposed to be.
That's because some of the CSS with a greater specificity is overruling other CSS to hide it.

.title {
  display: none
.inactive .title {
  display: block;

Solution: delete that inactive style declaration, and move its display declaration to the .title block instead.


It's already set like this:

.title {
  display: none;

.inactive .title {
  display: block;


Which is faulty and not working, because you are asking for my help.

Do what I said and it will work. Delete the inactive declaration, and replace the title declaration with the block one instead.



.inactive .title {
  display: none;
  display: block;


You are obviously failing to understand.

Replace the following code:

.title {
  display: none;

.inactive .title {
  display: block;

With only this code:

.title {
  display: block;

and it works as is shown at



How do you get the audio to play?

Start after you open it?