Как показать iframe с содержимым ниже в FancyBox?

Question

Теперь я написал стандартный код для загрузки iframe в окне FancyBox. Поэтому я указал тип iframe и href ссылку с параметрами youtube.

$.fancybox({ 
      'type' : 'iframe', 
      'maxWidth': "90%", 
      'href' : href.replace(new RegExp('watch\\?v=', 'i'), 'embed/') + '?theme=dark&color=white&autohide=1&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&showinfo=0&autoplay=1', 
      'padding' : 0, 
      'margin' : 0, 
      'autoCenter': false, 
      'scrolling' : 'no', 
      'fitToView' : false, 
      'width' : 950, 
      'overlayShow': true, 

      beforeLoad : function() { 
       var template; 
       var hash; 
       var info; 
       getVideo(id); 
      }, 

      afterLoad:function(){ 
       $('.fancybox-inner').append(template); 
       changeURL(matchYoutubeUrl(href)+'#'+id, info.VideoName, info); 
      }, 

      helpers: { 
       overlay: { 
        locked: false 
       } 
      } 
     }); 

мне нужно показать IFrame YouTube и после этого показать любой HTML код. Как сделать? Я попробовал в методе:

afterLoad:function(){ 
    // $('.fancy-content').html('<b>Any....</b>'); 
} 

Но этот случай очистить мой IFRAME ...

Также попробовал:

afterLoad:function(){ 
    $('.fancybox-inner').append(template); 
} 

Это работает, но я не вижу содержания, его скрытый , блок .fancybox-inner имеет высоту = 600 пикселей, но содержание более 600 пикселей, поэтому я не вижу ...

Answer 1

Попробуйте ref resh your fancybox (ваш iframe нужно поместить внутри «fancybox-inner» и блока отображения, чтобы сделать эту работу) после загрузки iframe (нет необходимости ждать, пока он будет загружен, если ваш iframe имеет статическую высоту).

afterLoad:function(){ 
    $('.fancybox-inner').append(template); 

    //resize fancybox 
    $.fancybox.update(); 
} 

Другим решением является, чтобы загрузить IFRAME в ваш .fancybox-inner в beforeLoad -Event функции. Таким образом, fancybox должен правильно регулировать контент.

Answer 2

Вы можете использовать FancyBox title добавить любое содержимое HTML вы хотите, вам просто нужно установить, что содержание HTML внутри переменной как:

var template = 
    '<div id="VideoModalDisplay">' + 
    '<p>whatever html content you want to set here</p>' + 
    '</div>'; 

... или внутри (скрытый) HTML <div> как:

<div id="template" style="display: none;"> 
    <div id="VideoModalDisplay"> 
     <p>Lorem Ipsum</p> 
     <p>whatever html content you want to set here</p> 
     <p>...etc...</p> 
    </div> 
</div> 

... и тянуть, что содержимое внутри beforeLoad обратного вызова (используя второй вариант), как

beforeLoad: function() { 
    // some more options 
    var template = jQuery("#template").html(); 
    this.title = this.title ? this.title + template : template; 
} 

Теперь, на основании ваших jsfiddle, если вы хотите позвонить FancyBox из этого HTML

<div class="play" id="4" data-width="850" data-height="470" data="https://www.youtube.com/embed/8UVNT4wvIGY"></div> 

... вы можете настроить его как

<div class="play" id="4" data-fancybox-href="https://www.youtube.com/embed/8UVNT4wvIGY" data-width="850" data-height="470" ></div> 

Уведомление I изменен data="{youtube URL}" в data-fancybox-href="{youtube URL}", так что fancybox будет знать, где взять контент.

заметить также, что если URL имеет следующий формат

https://www.youtube.com/embed/8UVNT4wvIGY 

... вы на самом деле не нужен метод replace(), чтобы преобразовать его.

После, получить различные значения (width, height и т.д.) из data атрибутов внутри beforeLoad обратного вызова, как:

beforeLoad: function() { 
    var info = '?theme=dark&color=white&autohide=1&rel=0&iv_load_policy=3&modestbranding=1&enablejsapi=1&origin=http://whoismed.com&showinfo=0&autoplay=1'; 
    // getVideo(id); 
    var template = jQuery("#template").html(); 
    this.href = this.href + info; 
    this.title = this.title ? this.title + template : template; 
    this.width = $(this.element).data("width"); 
    this.height = $(this.element).data("height"); 
} 

Уведомлениеthis.href, this.title, this.width и this.height см по умолчанию значения FancyBox которые могут быть переопределены внутри обратного вызова.

заметить также, что this.href получает свое значение из специального data-fancybox-href атрибута (в вашем HTML), но мы перекрывая его добавить Varinfo с задними параметрами YouTube.

Смотреть полный код в JSFIDDLE

Нет необходимости потеть, пытаясь изменить размер FancyBox после добавления содержимого.