在灯箱中为不同的 YouTube 链接打开 YouTube 视频

Question

我正在尝试使用单个 java 脚本打开多个 link 的 YouTube 视频。但是 java 脚本只是为单个 link 编写的。如何 link 它到其他 youtube link。如果我单击特定图像，灯箱必须打开并且视频必须播放。在此代码中，只有第一个 link 将获得灯箱，其中第二个 link 将被重定向到 youtube 页面。

<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" />

$(文档).ready(函数() {

        $("#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>

如何使上述 java 脚本同时适用于 hyperlink。请有人帮忙解决这个问题。

Answer 1

HTML 中不能有 2 个具有相同 ID 的元素。使用 classes 而不是 ID：

<a class="yt" href="..." target="_blank">...</a>

然后您可以将 jQuery 选择器从 $("#yt") 更改为 $(".yt") 以将点击事件绑定到所有具有 yt [=19= 的超链接] 在他们身上。

Answer 2

<!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>

我已经在 jquery 中替换了 $(".yt") 即而不是 $("#yt")，所以它变成了 $(".yt").click(function() 并且在 HTML [=在 <a>.

中添加了 14=] 而不是 id="yt"

在灯箱中为不同的 YouTube 链接打开 YouTube 视频

Opening a YouTube video in lightbox for different youtube links

html

css

jquery

lightbox

fancybox