带有IFrame问题的JQuery FancyBox（PHP） [英] JQuery FancyBox With IFrame Issue (PHP)

问题描述

您好我正在尝试在我制作的包含视频的网页中使用FancyBox，就像视频库一样，我的目的是将YouTube视频关联起来。

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

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

  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 / javascriptsrc =scripts / jquery.fancybox-1.3 .4.pack.js>< /脚本> 
< link rel =stylesheettype =text / csshref =css / jquery.fancybox-1.3.4.css> 
  

基于

Hi I am trying to use FancyBox in a page I am making containing videos, Like a Gallery of videos, my intention is to be linking YouTube videos in.

The issue I get is it just links through to the age link a normal a tag would do and nothing else happens.

This is the code I am using to generate the videos.

    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>";
    }

All my video link are pulled from a database and then displayed on the page as a a text link which "should" open the iframe when clicked. The only aspect that doesn't work is the iframe. everything else pulls and displays correctly.

I have included the files correctly and they link correctly to the resources. just for consolidation see below.

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

Based off this stack overflow post I have tried to fix it. My code does contain the jquery below just under the head tags.

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

解决方案

You have two (none PHP related) issues :

1). This youtube format :

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

.... is not supported inside an iframe because most likely it contains a DENY X-Frame-options response header. You may need to convert it into an embed format like :

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

2). The special class fancybox.iframe is only supported in fancybox v2.x but you seem to be using fancybox v1.3.x. So you rather use the class iframe or add the API option

type: "iframe"

... to your custom fancybox initialization script.

Since you are pulling the video links from a database, the good news is you don't have to change anything in your PHP code but only in your jQuery code like :

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

Notice I am adding ?autoplay=1 to the new href but that's optional if you want your videos autoplay once in fancybox's iframe.

这篇关于带有IFrame问题的JQuery FancyBox（PHP）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！