jquery - ページの読み込み時に Fancybox を起動し、YouTube ビデオを自動で終了して自動で終了することは可能ですか?

Question

ページの読み込み時に Youtube ビデオで Fancybox を自動的に開始し、ビデオの最後で自動的に閉じることは可能ですか? (一種のイントロ)

Answer 1

はい、可能です。fancybox の Web サイト(ヒントとコツ No.15)の例を参考にして、必要に応じて微調整してください。

最初に、YouTube プレーヤー API をロードする必要があります (もちろん、jQuery と fancybox の js と css ファイルは別として)。

<script src="http://www.youtube.com/player_api"></script>

次にonYouTubePlayerAPIReady()、fancybox カスタム スクリプトを内部に含む関数を作成して、ビデオを起動します。

次に、fancyboxbeforeShowコールバック内で、ビデオの最後にリスナーを設定し、次の$.fancybox.close()ようなメソッドを使用して fancybox を閉じます。

function onYouTubePlayerAPIReady() {
    $(document).ready(function () {
        $.fancybox({
            href: "http://www.youtube.com/embed/L9szn1QQfas?enablejsapi=1&wmode=opaque&autoplay=1",
            type: "iframe",
            beforeShow: function () {
                // Find the iframe ID
                var id = $.fancybox.inner.find('iframe').attr('id');
                // Create video player object and add event listeners
                var player = new YT.Player(id, {
                    events: {
                        'onStateChange': function (event) {
                            if (event.data === 0) {
                                $.fancybox.close();
                            } // if
                        } // onStateChange
                    } // events
                }); // YT.Player
            } // beforeShow
        }); // fancybox
    }); // ready
} // onYouTubePlayerAPIReady

JSFIDDLEを参照してください