33

FancyboxでYouTubeビデオを開くことはできますか？

私はYouTubeビデオリンクのリストを持っています、例えば：

<a href="http://www.youtube.com/watch?v=PvbqV8W96D0" class="more">Play</a>

およびFancybox：

$("a.more").fancybox({
                    'titleShow'     : false,
                    'transitionIn'  : 'elastic',
                    'transitionOut' : 'elastic'
        });

ビデオごとに新しい埋め込みオブジェクトを作成したくありません。

プラグイン、またはそれを行う他の方法はありますか？

4

6 に答える 6

35

これは壊れています、編集を参照してください

<script type="text/javascript">
$("a.more").fancybox({
                    'titleShow'     : false,
                    'transitionIn'  : 'elastic',
                    'transitionOut' : 'elastic',
            'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'      : 'swf',
            'swf'       : {'wmode':'transparent','allowfullscreen':'true'}
        });
</script>

このように、ユーザーjavascriptが有効になっている場合は、youtube埋め込みビデオでファンシーボックスが開き、javascriptが無効になっている場合は、ビデオのyoutubeページが開きます。必要に応じて追加できます

target="_blank"

各リンクに対して、ほとんどのDoctypeで検証されませんが、fancyboxがリンクを取得しない場合は、新しいウィンドウでリンクが開きます。

編集

thishref上記の、は正しく参照されていないため、コードは。の下にありませんthis。あなたはそれをこのように呼ぶ必要があります：

$("a.more").click(function() {
    $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'     : 680,
            'height'        : 495,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
                 'wmode'        : 'transparent',
                'allowfullscreen'   : 'true'
            }
        });

    return false;
});

http://fancybox.net/blog＃4で説明されているように、上記で複製

于 2010-03-30T12:27:32.053 に答える
22

ここでの回答を使用することから始めましたが、YouTubeの新しいiframe埋め込みを使用するように変更しました...

$('a.more').on('click', function(event) {
    event.preventDefault();
    $.fancybox({
        'type' : 'iframe',
        // hide the related video suggestions and autoplay the video
        'href' : this.href.replace(new RegExp('watch\\?v=', 'i'), 'embed/') + '?rel=0&autoplay=1',
        'overlayShow' : true,
        'centerOnScroll' : true,
        'speedIn' : 100,
        'speedOut' : 50,
        'width' : 640,
        'height' : 480
    });
});
于 2011-09-22T14:13:55.743 に答える
21 
$("a.more").click(function() {
                 $.fancybox({
                  'padding'             : 0,
                  'autoScale'   : false,
                  'transitionIn'        : 'none',
                  'transitionOut'       : 'none',
                  'title'               : this.title,
                  'width'               : 680,
                  'height'              : 495,
                  'href'                : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                  'type'                : 'swf',    // <--add a comma here
                  'swf'                 : {'allowfullscreen':'true'} // <-- flashvars here
                  });
                 return false;

            });
于 2010-04-05T18:15:12.803 に答える
5

自動再生機能を追加したい場合。単に交換する

this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),

と

this.href = this.href.replace(new RegExp("watch\\?v=", "i"), 'v/') + '&autoplay=1',

また、vimeoでも同じことができます

this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1'),

と

this.href = this.href.replace(new RegExp("([0-9])","i"),'moogaloop.swf?clip_id=$1') + '&autoplay=1',
于 2010-08-19T16:09:59.210 に答える
2

これは正規表現であるため、YouTubeのURLをコピーして貼り付けるだけの方が簡単です。クライアントにCMSを使用する場合に最適です。

/*fancybox yt video*/
$(".fancybox-video").click(function() {
    $.fancybox({

    padding: 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'         : 795,
        'height'        : 447,
        'href'          : this.href.replace(new RegExp("watch.*v=","i"), "v/"),
        'type'          : 'swf',
        'swf'           : {
        'wmode'             : 'transparent',
        'allowfullscreen'   : 'true'
         }

    });
    return false;
});
于 2012-11-13T03:19:24.507 に答える
1

ありがとう、アレクサンダー！

また、YouTubeのフラッシュコンテンツの上にあるファンシークローズボタンを設定するには、「wmode」を「swf」パラメータに追加します。

'swf': {'allowfullscreen':'true', 'wmode':'transparent'}
于 2010-12-14T10:05:33.727 に答える