FancyBox에서 iframe을 아래 내용으로 표시하는 방법은 무엇입니까?

Question

이제 FancyBox 창에 iframe을로드하기위한 코드를 작성했습니다. 그래서 나는 iframe과 href youtube params 링크를 지정했습니다.

$.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이 유튜브를 보여줄 필요가 있고 그 뒤에 HTML 코드를 보여줍니다. 수행하는 방법? 나는 방법으로 시도 :

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

그러나이 경우 내 iframe이 ... 또한 시도

취소 :

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

그것은 작품,하지만 난이 내용을 볼 해달라고, 숨겨진를 , 블록 .fancybox-inner의 높이가 600px이지만 내용이 600px 이상이므로 잘 알지 못합니다 ...

Answer 1

resh 귀하의 fancybox (귀하의 iframe은 내부에 배치해야합니다 "fancybox - 내부"및 디스플레이 블록이 일을하게) 일단 iframe이로드됩니다 (iframe이 정적 높이를 가지고 있다면로드 될 때까지 기다릴 필요가 없습니다).

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

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

타 솔루션입니다, 당신의 .fancybox-innerbeforeLoad에 -event 기능으로 iframe 대응을로드합니다. 그런 식으로, fancybox는 내용의 크기를 정해야합니다.

Answer 2

, 당신은 단지 같은 변수 안에 그 HTML 콘텐츠를 설정해야합니다 당신은 당신이 원하는 HTML 콘텐츠를 추가 할 fancybox title을 사용할 수

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> 

... 그리고

,492,349 같은 beforeLoad 콜백 내부 콘텐츠 (두 번째 옵션을 사용)를 당겨 이 HTML

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

에서 fancybox를 호출 할 경우 이제3210

, 당신은

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

공지 사항 I처럼 조정할 싶어 ... 당신의 jsfiddle에 수를 기반으로 data="{youtube URL}"을 data-fancybox-href="{youtube URL}"으로 변경 했으므로 fancybox는 콘텐츠를 가져올 위치를 알 수 있습니다.

는 또한 URL이 형식

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

이 있다면 ... 당신은 실제로 그것을 변환하는 replace() 방법을 필요로하지 않는다는 것을 알 수 있습니다.

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의 기본값으로 참조 :

후, 같은 beforeLoad 콜백 내부의 data 속성에서 다른 값 (width, height 등)를 얻을 콜백 내부에서 재정의 될 수 있습니다.

또한 this.href이 (당신의 HTML에) 특별한 data-fancybox-href 속성에서 값을 얻을 수 있음을 알 수 있지만, 우리는 당신의 유튜브 후행 매개 변수와 함께 VAR에게info을 추가 무시된다.

는 JSFIDDLE

에 내용을 추가 한 후 fancybox의 크기를 조정하려고 땀을 할 필요가 전체 코드를 참조하지 않습니다.