JQuery FancyBox 与 IFrame 问题 (PHP)

Question

您好，我正在尝试在我正在制作的包含视频的页面中使用 FancyBox，就像视频库一样，我的目的是 link 在其中播放 YouTube 视频。

我遇到的问题是 link 到年龄 link 一个普通的 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>";
    }

我所有的视频 link 都是从数据库中提取的，然后作为文本 link 在页面上显示，单击时 "should" 打开 iframe。唯一不起作用的方面是 iframe。其他一切都正确拉动和显示。

我已经正确地包含了这些文件，并且它们 link 正确地添加到了资源中。仅供合并，请参见下文。

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

Answer 1

您有两个（none PHP 相关的）问题：

1).此 youtube 格式：

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

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

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

2).特殊的 class 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.

JQuery FancyBox 与 IFrame 问题 (PHP)

JQuery FancyBox With IFrame Issue (PHP)

html

php

iframe

jquery

fancybox