Opening a YouTube video in lightbox for different youtube links

I am trying to open the YouTube video for the multiple links with single java script. But the javascript is been written only for the single link. How to link it to other youtube link. If I click on the particular image the lightbox must open and the video must play. In this code only the 1st link will get the lightbox where a the 2nd link will be redirected to youtube page.

<script type="text/javascript" src="jquery.fancybox-1.3.4/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

$(document).ready(function() {

        $("#yt").click(function() {
            $.fancybox({
                    'padding'        : 0,
                    'autoScale'      : false,
                    'transitionIn'   : 'none',
                    'transitionOut'  : 'none',
                    'title'          : this.title,
                    'width'          : 680,
                    'height'         : 495,
                    'href'           : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                    'type'           : 'swf',
                    'swf'            : {
                        'wmode'              : 'transparent',
                        'allowfullscreen'    : 'true'
                    }
                });
            return false;
        });
    });
    $('#foo').bind('click', function() {
          alert($(this).text());
        });
        $('#foo').trigger('click');
</script>

    <h1>fancybox example</h1>
 <p><a id="yt"title=""href="http://www.youtube.com/watchv=h3GEQIbcfwA&amp;fs=1&amp;autoplay=1">sadf</a></p>  <p><a id="yt" title="" href="https://www.youtube.com/watchv=pAJxACKSdMM;autoplay=1">adfa</a></p>

How to make the the above java script to work for both the hyperlink. Please some one help to solve this issue.

Solution

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jquery.fancybox-1.3.4/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-

1.3.4.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.fancybox-1.3.4/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-

1.3.4.css" media="screen" />

    <script type="text/javascript">
        $(document).ready(function() {

            $(".yt").click(function() {
                $.fancybox({
                        'padding'        : 0,
                        'autoScale'      : false,
                        'transitionIn'   : 'none',
                        'transitionOut'  : 'none',
                        'title'          : this.title,
                        'width'          : 680,
                        'height'         : 495,
                        'href'           : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                        'type'           : 'swf',
                        'swf'            : {
                            'wmode'              : 'transparent',
                            'allowfullscreen'    : 'true'
                        }
                    });
                return false;
            });
        });

    </script>
</head>

<body>

        <h1>fancybox example</h1>
        <p><a class="yt" title="" href="http://www.youtube.com/watch?
v=h3GEQIbcfwA&amp;fs=1&amp;autoplay=1">Movie1</a></p>
<p><a class="yt"  title="" href="http://www.youtube.com/watch?v=pAJxACKSdMM">Movie2</a></p>



</body>
</html>

I have replaced $(".yt") in the jquery i.e instead of $("#yt"), so it becomes $(".yt").click(function() and in the body of the HTML class="yt" has been added instead of id="yt" in the <a>.