Q:

How to change variable depending on element clicked

learning javascript. I got a project with links that trigger videos that live inside an iframe. The idea is that when you click the link (with id of "clickable" in this case), the video is displayed and starts playing. When you click again it closes and it also closes automatically when it ends playing. I wrote some terrible code and someone's already helped me out with this function:
$(document).ready(function(){

        var frame = $("#frame");
        var player;

        frame.bind("load", function () {
            player = $(this).contents().find("#myVid");
            player.on('ended', function () {
                frame.removeClass("open");
            });
        });

        $("#clickable").click(function(){
            if (frame.hasClass("open")) 
            {
                frame.removeClass("open");
                player[0].pause();
            } 
            else {
                frame.addClass("open");
                player[0].play();
            }
        });
    });

This works perfectly. What I would like now is, since my page contains about 10 iframe elements, not have to write this function ten times. So how would I pass the click link and the video id as arguments so that I can use a switch statement to be a bit more elegant about my code? 
I am thinking along the lines:
var userClick;

    userClick.on('click' function () {
        var frame = $("#frame");
        var player;
   etc....

But I am not sure how to grab the id of the "click" if that makes sense, and how to grab the video id. Thanks for your time. P

A:

Use the following code. What it does is it encapsulates each video code you have with a div and uses each(), parent() and siblings() jquery methods to get to the link of your code.
Use multiple following div blocks with updated iframe video links in your page
HTML Code:
<div class="videoBlock">
  <p>
    ...some text...
    <span class="link">Video 1</span>.
    <br />
    <span>
       <iframe class="rect" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" scrolling="no" marginwidth="0" marginheight="0"></iframe>
    </span>
    <br />
    ...some more text...
  </p>
</div>

CSS Addition
.rect{
    float: left;
    height: 0px;
    width: 350px;
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 200px;
    width: 350px;
    opacity: 1;
    padding-bottom: 10px;
    padding-top: 10px;
}

.videoBlock{
display:block;width:100%;
}

        .videoBlock span {
            display:inline-block;
        }

Finally use the following jQuery script
$(document).ready(function () {
            $('.rect').each(function () {

                var frame = $(this);
                var player;

                frame.bind("load", function () {
                    player = $(this).contents().find("#myVid");
                    player.on('ended', function () {
                        frame.removeClass("open");
                        alert('finished');
                    });
                });

                frame.parent().siblings(".link").click(function () {
                    if (frame.hasClass("open")) {

                        frame.removeClass("open");
                        player[0].pause();

                    } else {

                        frame.addClass("open");
                        player[0].play();
                    }
                });
            });
        });

