修改 href 属性（在此 JSFiddle 中）以使用 Fancybox 中的 youtube 视频答案

【问题标题】：Modify href property (in this JSFiddle ) to work with youtube videos in Fancybox修改 href 属性（在此 JSFiddle 中）以使用 Fancybox 中的 youtube 视频
【发布时间】：2013-04-06 09:55:51
【问题描述】：

自从从 Fancybox 1.3.4 升级到 Fancybox 2.1.4 后，我无法获得正确的 href 属性来处理我的 youtube 视频。

请查看我正在尝试修改的这个有效的jsfiddle。

简单地说，我要做的就是从每个链接的 URL 中删除尾随的 &amp;autoplay=1，并将其添加到脚本内的 href 属性中。当我尝试这样做时，fancybox 会打开，但 youtube 视频无法播放并报告一般错误。

有人可以帮我把这段代码修改成工作版本吗？

这里是html：

<a href="http://www.youtube.com/watch?v=opj24KnzrWo&amp;autoplay=1">open youtube video</a>

<br />

<a href="http://www.youtube.com/watch?v=071KqJu7WVo&amp;autoplay=1">open youtube video 2</a>

和javascript：

(function ($) {
  $(document).ready(function(){
    $('a[href*=youtube]').each(function () {
        // convert youtube swf href to embed for iframe
        var thisHref = this.href.replace(new RegExp("watch\\?v=", "i"), 'embed/').replace(new RegExp("&", "i"), '?');
        // bind fancybox to each anchor
        $(this).fancybox({
        "padding": 0,
        "type": 'iframe',
        // add trailing parameters to href (wmode)
        "href" : thisHref+"&amp;wmode=opaque"
        }); // fancybox
    }); // each
  }); // ready
})(jQuery);`

谢谢。

【问题讨论】：

您只想替换尾随的“autoplay=1”吗？只需将其添加到替换行的末尾：.replace("autoplay=1", "") - 我想就是这样：jsfiddle.net/yZWv3/1
顺便说一句，你的小提琴对我来说效果很好，但它会自动播放
没有。就我而言，我有大约 8000 个 youtube 预告片，它们的 html 源代码没有附加尾随 &autoplay=1。我想做的是有一个工作示例，它在 html 中没有 &autoplay=1 而在 javascript 中自动播放。谢谢。 @伊恩
试试这个：jsfiddle.net/yZWv3/3 这似乎对我有用，但我仍然可能误解了这一点。注意第一个链接是如何工作的，即使它上面已经有一些查询字符串
嗨@Ian 感谢您的帮助！我的示例是视频 2，它现在可以在没有尾随 &autoplay=1 的情况下使用。如果我需要它仅适用于视频 2（因为我没有视频 1 的案例），我可以在 javascript 中删除哪些代码？再次感谢。

标签： jquery html youtube fancybox fancybox-2

【解决方案1】：

对于这种不带任何尾随参数的链接：

<a href="http://www.youtube.com/watch?v=opj24KnzrWo">open youtube video</a>
<a href="http://www.youtube.com/watch?v=071KqJu7WVo">open youtube video 2</a>

使用此代码

(function ($) {
  $(document).ready(function(){
    $('a[href*=youtube]').each(function () {
        // convert youtube swf href to embed for iframe
        var thisHref = this.href.replace(new RegExp("watch\\?v=", "i"), 'embed/');
        // bind fancybox to each anchor
        $(this).fancybox({
            "padding": 0,
            "type": 'iframe',
            // add trailing parameters to href (wmode) AND autoplay    
            "href" : thisHref+"?wmode=opaque&amp;autoplay=1"
        }); // fancybox
    }); // each
  }); // ready
})(jQuery);

您在前面的示例中遇到的问题是 wmode=opaque 是您的 second 参数，因此它需要前面的 &amp;

"href" : thisHref+"&amp;wmode=opaque"

但由于您要从链接中删除所有尾随参数，因此 wmode=opaque 成为 first 参数，因此它需要前面的 ?

"href" : thisHref+"?wmode=opaque&amp;autoplay=1"

查看新的JSFIDDLE

【讨论】：