5

モーダルでビデオを再生するためにFancyboxプラグインを使用しています。デスクトップやタブレットでビデオを再生するという要件は、これで簡単に満たされます。ただし、モバイルでは、モーダル ウィンドウを表示する代わりに、リンクをクリックすると動画が自動的にフルスクリーン モードで再生されます。ユーザーがリダイレクトしたときにYouTubeが自動的にフルスクリーンモードでプラグインを開くことを期待するために、モバイルでプラグインを無効にしてみました。しかし、うまくいきませんでした。

どうすればこれを達成できますか？それとも実際に可能ですか？

ここにjQueryがあります

$(function () {
        var jWindow = $(window);
        $(".youtube-media").click(function () {
            if (jWindow.width() <= 768)
                return;
            $.fancybox({
                'padding': 2, 'autoScale': true, 'transitionIn': 'none', 'transitionOut': 'none', 'title': this.title,
                'width': 600, 'height': 340, 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
                'type': 'swf', 'swf': {
                    'wmode': 'transparent',
                    'allowfullscreen': 'true'
                }
            });
            return false;
        });
    });

そして、ここにHTMLコードがあります

<a class="youtube-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Play Video</a>
4

1 に答える 1

8

クロスデバイスの互換性のために、この html 形式でembed開くことができるように、YouTube をその形式で使用したいと思います。iframe

<a class="youtube-media" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1&wmode=opaque&fs=1">youtube</a>

全画面サポート&fs=1を追加するためのパラメーターも追加したことに注意してください。

次に、このスクリプトはトリックを行う必要があります:

$(".youtube-media").on("click", function (e) {
    var jWindow = $(window).width();
    if ( jWindow <= 768 ) {
        return;
    }
    $.fancybox({
        href: this.href,
        type: "iframe" // when using embed format
    });
    return false;
});

このJSFIDDLEは小さい形式で表示されるため、YouTube はフルスクリーン ( results768px より小さい場合の領域) である必要があります。次に、このJSFIDDLEを大きな形式で表示して、youtubeがfancyboxに表示されるようにします。

注：.on()jQuery v1.7+が必要です

于 2013-08-25T21:48:21.083 に答える