Variants & Placeholders - Best Practice using ID & Classes?

[Initiostar]

Probably one for the techies here:

I have audio and video tags on a single variant, each with a unique ID. I have functions that call those tags using getElementById() - all works well e.g. Jukebox-Waterways.xar

The original designs for the Audio/Video plugins were always implemented as plugins (website within a website as required) - additional variants didn't feature.

However, with some recent enhancements, I am creating a second desktop variant (from the original mobile variant using Scale-to-fit-Width extended to same width as the new desktop variant).

Because the placeholders use IDs, AFAIK this does not work for second or subsequent variants.

Thought it possible to add a class="username" instead of id="username" to the placeholders and then use getElementsByClassName() but I am not sure how this plays out across Xara variants.

Guidance much appreciated.

Gary

BTW using separate IDs fixes the issue, but doubles up on the code

[Acorn]

Probably one for the techies here:
I have audio and video tags on a single variant, each with a unique ID. I have functions that call those tags using getElementById() - all works well e.g. Jukebox-Waterways.xar
The original designs for the Audio/Video plugins were always implemented as plugins (website within a website as required) - additional variants didn't feature.
However, with some recent enhancements, I am creating a second desktop variant (from the original mobile variant using Scale-to-fit-Width extended to same width as the new desktop variant).
Because the placeholders use IDs, AFAIK this does not work for second or subsequent variants.
Thought it possible to add a class="username" instead of id="username" to the placeholders and then use getElementsByClassName() but I am not sure how this plays out across Xara variants.
Guidance much appreciated. Gary

Gary, it probably won't work as you will have the joy of running the same track/video twice at the same time.
Even linking to a single source file through an IFRAME tag causes the same grief.

The "proper" coding would be to move the entire Placeholder to its second home within the Variant's HTML.
I have managed this with all sorts of code that is dependent on IDs; it is far harder when it is shuffling YouTube videos about.

A saner approach ought to be keeping the media content in one location and changing the source to the media on a Variant becoming active.
With a Xara player, you do not have access the the track time, the reason I assisted in building up the bespoke coding we did a year back.

The cleanest solution I can suggest is to hive off the media to a separate non-variant site and use Scale to Fit Width.
It is best for forms and media as you don't have to worry about coding or session data.

Some nuts (acorns are not in play here) are too tough to crack.

Acorn

[Initiostar]

Thanks for the good advice Acorn,

The AV plugin works well and is best left as that, embedded in variants as required, or as you suggest resizable with Scale-to-fit-Width.

Thought I give it a try with different IDs and player names across variants, but it became a tad fragile! I'll stick with what we got to work a while back.

Thanks,

Gary