Question

I can get the following simple scenario to work:
A div on the page that when clicked will open a video using JW Player in an overlay window by FancyBox. Here is a stripped down code:

HTML:

<div>
    <a class="play_video" href="#" rel="/bin/video.mp4">Click to Watch Video</a>
</div>

jQuery:

$(document).ready(function() {
    $(".play_video").fancybox({
        content: '<div id="video_container" style="width:640px;height:381px;">Loading the player ... </div> ',
        afterShow: function()
            {
                var myVideo = $(".play_video").attr("rel");
                jwplayer("video_container").setup({
                    flashplayer: "/bin/player.swf",
                    file: myVideo,
                    width: 640,
                    height: 380,
                });
            }
    });
});

Here is my problem: if I want to display two DIVs each playing a different video how do I change the line

myVideo = $(".play_video").attr("rel")

to be dynamic and selecting the rel attribute of the right div. For example, the second div would look like:

<div>
    <a class="play_video" href="#" rel="/bin/another_video.mp4">Click to Watch a different Video</a>
</div>

I hope this is clear! Thank you for your help.

Answer 1

The problem with the .attr() method is that it gets the attribute value for only the first element in the matched set. To get the value for each element individually, you may have to use the method .each()

To make it actually work without looping through your links, you could set the video reference inside the href attribute (the proper way to work) and tweak your code this way :

html

<a class="play_video" href="/bin/video.mp4">Click to Watch Video</a>
<a class="play_video" href="/bin/another_video.mp4">Click to Watch a different Video</a>

script

$(document).ready(function() {
 $(".play_video").on("click", function(){
   $.fancybox({
     content: '<div id="video_container" style="width:640px;height:381px;">Loading the player ... </div> ',
     afterShow: function(){
        var myVideo = this.href;
        jwplayer("video_container").setup({
          flashplayer: "/bin/player.swf",
          file: myVideo,
          width: 640,
          height: 380,
        }); // jwplayer setup
     } // afterShow
   }); // fancybox
   return false; // prevents default 
 }); // on
}); // ready

NOTE: .on() requires jQuery 1.7+