Multiple instances of flexslider without setting IDs - can't use flexslider api

Question

Let me just being with adding that I base my code off from http://juanfra.me/2012/08/flexslider-multiple-videos-v2/, however, instead of the class .flexslider, I use only .slider.

What I have currently is 2 divs, (one right-aligned and one left-aligned), and then via JS I append and prepend them to create a "carousel"-effect between the different divs. Every div has one instance of flexslider.

This works good but because I clone the divs, I can't use IDs for them, since that would mean I clone a div, and then insert it and voilá, we have two elements (atleast) with the same ID.

So basically, everything works great, EXCEPT, calling .flexslider('play') or pause. I've tried with jQuery('.slider').data('flexslider').flexslider('play') aswell, but to no avail. I have also tried iterating over every .slider and call .flexslider('play/pause') on it. No messages in console.log either, which is just really weird. Please, could you point me in to the right direction?

I use the froogaloop-api to properly control my embedded vimeo-videos within flexslider, and this works.

This is part of my HTML-structure (had to remove certain parts such as additional classes, text, and the correct vimeo video URLs, also note that iframe ids are randomized (they are the same as the one I include in the vimeo player-url variable, but that's irrelevant since it's flexslider which is the problem):

<div class="slider customContent">
    <ul class="slides">
        <li>
            <div class="image">
                <iframe id="player_1" src="http://player.vimeo.com/video/123123?api=1&amp;player_id=player_1" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
            </div>

            <div class="post">
                <div class="content">
                    <span class="meta-title">Another title</span>
                </div>
            </div>
        </li>
        <li>    
            <div class="image">
                <iframe id="player_2" src="http://player.vimeo.com/video/123123?api=1&amp;player_id=player_2" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
            </div>

            <div class="post">
                <div class="content">
                    <span class="title">A title</span>
                </div>
            </div>
        </li>
    </ul>
</div>

Here's a jsfiddle: http://jsfiddle.net/DMPpa.

WHat happens: when I play a video which has an ID another div has (since there can only be one ID), flexslider refuses to pause the specific flexslider instance of that id and video. For example, if I click on the last flexslide item, I want to pause the slideshow and play video, instead it does not pause the slideshow and after a small amount of time flexslider "slides" to the other video item without pausing the currently played one.

If I set a unique ID on every iframe, this works, but I can't do that in my HTML because of the divs getting appended and prepended to create a carousel effect.

So what I'm thinking we need to do is store a temporary ID (serverside-generated perhaps), in a "data-fakeid" on that iframe, and then iterate over every iframe and set the ID, add the methods, and then remove the ID since it has to be unique.. Or something. Sadly, I need a push in this matter.

So, I tried to clarify a few things. Hope you understand - thanks in advance.

Answer 1

Alright, so what I ended up doing (and to help future developers who encounter the same "problem", which actually isn't really a problem):

I ended up generating the IDs through javascript (since I'm modifying the DOM; the divs and the iframes when appending and prepending, so it couldn't be done serverside), and then calling Froogaloop addEvent of the "new" iframe with the clientside generated ID, as well as re-initializing the flexslider on that "new" DOM-structure. This was the most logical solution, however I was too stressed to understand this.

My actual problem was that I needed a way to attach handlers for vimeo-videos in combination with Froogaloop and Flexslider without setting IDs on them. Both, which totally did not work (well, it shouldn't!) when having the same IDs on elements such as the vimeo videos (iframes).

I appreciate the help you guys gave me! Best of luck to you!