web-dev-qa-db-ja.com

jQueryFancyboxとYouTubeの埋め込み

YouTubeの埋め込みをFancyboxで開くようにしようとしています。 Fancyboxページのコードに基づいています— http://fancyapps.com/fancybox

これが私が持っているものです：

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

そしてcall.js

$(document).ready(function() {

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

しかし、リンクをクリックするたびに、同じウィンドウでYouTubeビデオが全画面表示されます... Fancyboxではありません

Jsファイルが読み込まれていることを確認しました。また、FFコンソールでエラーが発生していません。

誰かが私が間違っていることを見ることができますか？

jqueryyoutubefancyboxembedfancybox-2
6
pealo86

YouTubeのembed形式を使用している場合：

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

...次に、3つのオプションがあります。

1）。特別なクラスfancybox.iframeを次のようにリンクに追加します

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

[〜＃〜] jsfiddle [〜＃〜]

noticeこのクラスは既存の.fancyboxに追加されますclass（はい、ドット付きのフォーマットは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 [〜＃〜]

これらのオプションのいずれかを選択します（すべてを設定する必要はありません）

18
JFK