I am using with Joomla 3.x and a super-helix-ii responsive template.

I have several links to external mp3's to list in an article.

I am having a hard time getting the labels for each one close enough so that it is obvious which one is playing.  Is it possible to get my label right up close to the player, either to the side or above or below so that it is clear which mp3 is playing?

Thanks for a great plugin.

Could you please provide a link to your video page to check it out?

Thank you.

Sure, here it is:

cachecomm.com/index.php/2-uncategorised/16-mp3

and here is how the article content looks:

Play it here {mp3remote}secure.ohmserv.com:8888/VSTUDIO/Client_Music_Selections/2012_Killer_Tracks_Musicbeds_Web_Quality/Pop/Love_Takes_Two.mp3{/mp3remote}



Play it here {mp3remote}secure.ohmserv.com:8888/VSTUDIO/Client_Music_Selections/2012_Killer_Tracks_Musicbeds_Web_Quality/Pop/Virgin_Mary.mp3{/mp3remote}

Here is what it looks like in HTML View Source:

<p style="text-align: left;">Play it here {mp3remote}<a href="secure.ohmserv.com">secure.ohmserv.com:8888/VSTUDIO/Client_Music_Selections/2012_Killer_Tracks_Musicbeds_Web_Quality/Pop/Love_Takes_Two.mp3{/mp3remote}

<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">Play it here {mp3remote}<a

Thanks

This can be achieved by css.
Just add a class to your p elements that include the label and add this block of CSS in your template's css file.

p.playerLabel {float:left;max-width:10%;}
p.playerLabel:before {clear:both;content:"";display:block;}
.avPlayerWrapper {clear:none;float:left;max-width:80%;}
.avPlayerWrapper .avPlayerContainer {float:left;}

Make sure that your structure in the article has this source code:

<p class="playerLabel">Play it here</p>
{mp3remote}secure.ohmserv.com:8888/VSTUDIO/Client_Music_Selections/2012_Killer_Tracks_Musicbeds_Web_Quality/Pop/Love_Takes_Two.mp3{/mp3remote}
<p class="playerLabel">Play it here</p>
.....

Okay, thanks I try it.

Can I place this code in my article or somewhere maybe as a seperate css file so as to not mess with the template css. (not quite sure how to make that happen, any help appreciated so that I don't break everything else)  I am a bit concerned about messing it up or having it overwritten on a future update.  And, I also want to maintain the responsive functionality of the template.  Hope that makes sense.

Thanks

You can create an override of the template AllVideos is using, read here www.joomlaworks.net/docs/allvideos under MVC Templating on how you can achieve this and put the code in this template's css file.

So I  copied this folder:  /plugins/content/jw_allvideos/jw_allvideos/tmpl/responsive (which contained one file template.css)

to here:  /templates/YOURJOOMLATEMPLATE/html/jw_allvideos/

then pasted this code to the end of the template.css file
p.playerLabel {float:left;max-width:10%;}
p.playerLabel:before {clear:both;content:"";display:block;}
.avPlayerWrapper {clear:none;float:left;max-width:80%;}
.avPlayerWrapper .avPlayerContainer {float:left;}

and changed the content to this:
<p class="playerLabel">Play it here</p>
{mp3remote}secure.ohmserv.com:8888/VSTUDIO/Client_Music_Selections/2012_Killer_Tracks_Musicbeds_Web_Quality/Pop/Love_Takes_Twozz.mp3{/mp3remote}

It does not seem to make any change in the display placement of the label by the player.

Sorry, what have I missed here?

Thanks

OK. So in your templates folder you have under html
jw_allvideos/responsive/template.css.

In your content page the class for the p element should be pasted in the editors source code not through the content itself. It should be HTML not content.

Yes, that is what I have done.

Here is the html from the article.

<p class="playerLabel">&nbsp;</p>
<p>Play it here {mp3remote}<a href="secure.ohmserv.com">secure.ohmserv.com:8888/VSTUDIO/Client_Music_Selections/2012_Killer_Tracks_Musicbeds_Web_Quality/Pop/Love_Takes_Two.mp3{/mp3remote}

<p class="playerLabel">&nbsp;</p>

I can't see any difference in the labeling.....sorry.

The HTML is wrong. You should have this

Please try again.