2015-02-11 2 views
1

Привет Я пытаюсь использовать FancyBox на странице творю, содержащие видео, Как галерея видео, мое намерение состоит в том, чтобы быть ссылки видео YouTube в.JQuery FancyBox С IFrame Issue (PHP)

Вопрос I get - это просто ссылки на возрастную ссылку нормального тега 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 Я попытался исправить это. Мой код содержит jquery ниже под заголовками.

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

ответ

1

У вас есть два (нет PHP связанные) вопросы:

1). Это YouTube Формат:

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

.... не поддерживается внутри iframe, потому что, скорее всего, он содержит заголовок ответа на DENYX-Frame-options. Вы, возможно, потребуется преобразовать его в формат с вставлять как:

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

2). Специальный класс fancybox.iframe поддерживается только в fancybox v2.x, но вы, кажется, используете fancybox v1.3.x. Таким образом, вы предпочитаете использовать класс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 

Уведомление I я добавляю ?autoplay=1 к новому href, но это необязательно, если вы хотите, чтобы ваши видеоролики autoplay раз в iframe fancybox.

JSFIDDLE