jQuery FancyBox YouTube 동영상이 작동하지 않습니다.

Question

'href'속성을 제외하고 앵커 태그의 HTML 코드를 수정할 수없는 상황이 있습니다. 따라서 앵커 태그에 클래스를 추가하는 것은 옵션이 아닙니다. 다음과 같이

HTML 태그는 다음과 같습니다

<a href="http://www.youtube.com/watch?v=#########&amp;autoplay=1"></a> 

이 다른 링크를 구별하기 위해, 나는 jQuery 코드에 'HREF'를 기반으로 선택기를 추가했습니다.

(function ($) { 

    $('a[href*="youtube"]').fancybox({ 
      'padding' : 0, 
      'type' : 'swf', 
      'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 
      'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' } 
      }); 
e.preventDefault(); 

})(jQuery); 

이 전혀 작동하지 않는 것 다음과 같이

코드입니다. 아무도 내가 잘못 가고 있다고 말할 수 있습니까? 나는 Drupal을 사용하고 있는데, 왜 '$'를 가능하게하기 위해 맨 위에 파트를 추가 했는가?

콘솔에서 오류를 볼 수 없으며 페이지가 자바 스크립트 간섭없이 YouTube 페이지로 바로 이동합니다.

Answer 1

adding a class to the anchor tag is not an option 

당신은 항상

처럼 jQuery를 통해 클래스를 추가 할 수 있기 때문에 반드시 사실이 아니다

$('a[href*="youtube"]').addClass("fancybox") 

어쨌든 개인적으로는 더 이상 모드를 사용하고 싶지 않습니다. iframe 모드는 더 이상 YouTube 동영상에 사용되지 않습니다. 그것은 그들을 쉽게 처리하고 할 수 있습니다 크로스 플랫폼 .each() 방법을 사용하여, 내가 무엇을 할 것이라고

은 (아이폰 OS 포함) 호환 :

• 변환 자바 스크립트를 .replace()
• 바인딩을 사용하여 모든 단일 hrefembed에 형식을 각각의 앵커는
• 가 fancybox href API 옵션

을 사용하여 새 변환 href을 설정 fancybox하기 그렇지 않으면 닫기 버튼이 YouTube 동영상 뒤에있을 것입니다, 내가 wmode=opaque을 추가

(function ($) { 
    $(document).ready(function(){ 
    $('a[href*=youtube]').each(function() { 
     // convert youtube swf href to embed for iframe 
     var thisHref = this.href 
         .replace(new RegExp("watch\\?v=", "i"), 'embed/') 
         .replace(new RegExp("&", "i"), '?'); 
     // bind fancybox to each anchor 
     $(this).fancybox({ 
      "padding" : 0, 
      "type" : "iframe", 
      // add trailing parameters to href (wmode) 
      "href" : thisHref + "&wmode=opaque" 
     }); // fancybox 
    }); // each 
    }); // ready 
})(jQuery); 

공지 사항 :

이 5,모두 fancybox의 v1.3.4 또는 버전 2.x 작동 코드입니다.

그렇게 v2.1.4

Answer 2

당신은 폐쇄 내부의 doc ready 핸들러를 놓친하고 e.preventDefault()에 대한 필요가 없습니다 :

(function ($) { 
    $(function(){ 
    $('a[href*="youtube"]').fancybox({ 
     'padding' : 0, 
     'type' : 'swf', 
     'href' : this.href.replace(/watch?v=/gi, 'v/'), 
     'swf' : { 'wmode' : 'transparent', 'allowfullscreen' : 'true' } 
    });  
    }); 
})(jQuery);