在灯箱中打开 YouTube 视频以获取不同的 youtube 链接答案

【问题标题】：Opening a YouTube video in lightbox for different youtube links在灯箱中打开 YouTube 视频以获取不同的 youtube 链接
【发布时间】：2015-10-08 05:00:59
【问题描述】：

我正在尝试使用单个 java 脚本打开多个链接的 YouTube 视频。但是 javascript 仅针对单个链接编写。如何将其链接到其他 youtube 链接。如果我单击特定图像，灯箱必须打开并且视频必须播放。在此代码中，只有第一个链接将获得灯箱，第二个链接将被重定向到 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" />

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

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

【问题讨论】：

澄清一下，您的意思是如何编码，以便在点击任一链接时打开两个视频？
更具体地说 youtube.com/watch?v=h3GEQIbcfwA" target="_blank" > youtube.com/watch?v=pAJxACKSdMM;autoplay=1" target="_blank"> a> ....... 当我点击特定图像时，灯箱必须出现并且视频必须从 youtube 播放
fiddle.jshell.net/#&togetherjs=U4OVR4n6Ql 我没有包含fancybox插件。

标签： jquery html css fancybox lightbox

【解决方案1】：

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

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

然后您可以将 jQuery 选择器从 $("#yt") 更改为 $(".yt") 以将点击事件绑定到所有具有 yt 类的超链接。

【讨论】：

如果你把 $(".yt") 放在 JQuery 中，灯箱不会出现，它会被重定向到 youtube 页面。我希望灯箱出现并通过灯箱中的链接播放视频。
您必须将 class="yt" 添加到要打开 YouTube 视频的每个 <a> 元素中。
如果你在中从“id”更改为“class”也意味着它正在重定向页面但 LIGHTBOX 没有出现@Nerdwod
你能给我们看看实际的网页吗？很难猜测发生了什么。如果不能显示实际页面，可以拼一个 JSFiddle 吗？
如何将插件放入 JSFiddle 中？

【解决方案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 的正文中添加了class="yt"，而不是id="yt" 中的id="yt"。

【讨论】：