2014-11-28 2 views
3

팬시 박스에 열어 YouTube 퍼가기를 시도하고 있습니다. 나는 Fancybox 페이지의 코드에 기반 한 - 여기jQuery Fancybox 및 YouTube 퍼가기

http://fancyapps.com/fancybox 내가 무엇을 가지고 :

<a class="various fancybox" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a> 

그리고를 다음

$(document).ready(function() { 

    $(".various").fancybox({ 
      maxWidth : 800, 
      maxHeight : 600, 
      fitToView : false, 
      width  : '70%', 
      height  : '70%', 
      autoSize : false, 
      closeClick : false, 
      openEffect : 'none', 
      closeEffect : 'none' 
     }); 
}) 

call.js하지만 때마다 내가 링크를 클릭에, 그냥 Fancybox가 아닌 동일한 창에서 전체 화면으로 YouTube 동영상을 엽니 다.

내 Js 파일이로드되고 있는지 확인했습니다. y는 FF 콘솔에서도 오류가 발생하지 않습니다.

내가 뭘 잘못하고 있는지 누가 알 수 있습니까? 당신이 좋아하는 유튜브의 embed 형식을 사용하는 경우

답변

8

:

1) :

<a class="various fancybox" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a> 

은 ... 당신은 세 가지 옵션이 있습니다.

<a class="various fancybox fancybox.iframe" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a> 

JSFIDDLE

통지클래스 기존 .fancybox클래스에 추가처럼 당신의 연결에 특별한 클래스 fancybox.iframe 추가

(예, 점으로 형식은 OK입니다)

2). 처럼 링크에 특별한 data-fancybox-type="iframe" 속성을 추가

<a class="various fancybox" data-fancybox-type="iframe" href="https://www.youtube.com/embed/jid2A7ldc_8?autoplay=1">Youtube (iframe)</a> 

JSFIDDLE

3). 같은 사용자 정의 초기화 스크립트에 type: "iframe"를 추가

$(".fancybox").fancybox({ 
    type: "iframe", 
    // other API options 
}) 

JSFIDDLE

이러한 옵션 중 하나를 선택

+0

화려한 감사 (모든를 설정할 필요가 없습니다!) 실제로 데모 페이지에서'fancybox.iframe'을 본 기억이납니다 ... 실제로 어떻게 작동하는지 실제로 알지 못했습니다! 내가 생각하기는하지만'data-fancybox-type' 속성으로 갈 것입니다. – pealo86