带有 IFrame 问题的 JQuery FancyBox (PHP)答案

【问题标题】：JQuery FancyBox With IFrame Issue (PHP)带有 IFrame 问题的 JQuery FancyBox (PHP)
【发布时间】：2015-04-11 16:59:26
【问题描述】：

您好，我正在尝试在包含视频的页面中使用 FancyBox，就像视频库一样，我的意图是链接 YouTube 视频。

我得到的问题是它只是链接到年龄链接，一个普通的a 标签会做，没有其他事情发生。

这是我用来生成视频的代码。

    while ($row = mysqli_fetch_assoc($result)){
         echo "
             <div class='portalVideo'>
                  <a class='fancybox fancybox.iframe' href='https://www.youtube.com/watch?v=DB7jsjt4Uec'>
                      <h3>
                          <strong>".$row["VideoName"]."</strong>
                      </h3>
                  </a>
             </div>";
    }

我所有的视频链接都是从数据库中提取的，然后作为文本链接显示在页面上，单击该链接“应该”打开iframe。唯一不起作用的方面是iframe。其他一切都正确拉动并显示。

我已正确包含文件，并且它们正确链接到资源。仅用于合并，请参见下文。

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

基于this stack overflow post 我已经尝试修复它。我的代码确实包含在 head 标签下的 jquery。

<script type="text/javascript">
    $(document).ready(function() {
        $('a.fancybox').fancybox();
    });
</script>

【问题讨论】：

标签： php jquery html iframe fancybox

【解决方案1】：

您有两个（与 PHP 无关的）问题：

1)。这个 youtube 格式：

https://www.youtube.com/watch?v=DB7jsjt4Uec

.... 在 iframe 中不受支持，因为它很可能包含 DENY X-Frame-options 响应标头。您可能需要将其转换为 embed 格式，例如：

https://www.youtube.com/embed/DB7jsjt4Uec

2)。特殊类fancybox.iframe 仅在fancybox v2.x 中受支持，但您似乎使用的是fancybox v1.3.x。所以你宁愿使用 class iframe 或添加 API 选项

type: "iframe"

... 到您的自定义 fancybox 初始化脚本。

由于您是从数据库中提取视频链接，好消息是您不必更改 PHP 代码中的任何内容，而只需更改 jQuery 代码，例如：

jQuery(document).ready(function ($) {
    $(".fancybox").each(function (i) {
        // change links on the fly to embed format
        this.href = this.href.replace(new RegExp("watch\\?v=", "i"), 'embed/') + "?autoplay=1";
    }).fancybox({
        // API options
        type: "iframe" // needed for videos embed format
    });
}); // ready

通知我正在将?autoplay=1 添加到新的href 但如果您希望您的视频autoplay 一次在fancybox 的iframe 中，这是可选的。

【讨论】：