colorboxを使用してポップアップしたあとに動画を自動再生したい

寒い！今年も私が住んでいる地域では雪が降りました…。

 

今回はcolorboxを使用してポップアップしたあとに動画を自動再生してみました。
なんでかこれ、めちゃくちゃ苦戦したんですよー。
しかも私の場合、カスタム投稿タイプで複数の動画を同じsingle内に出していたので余計…。

 

結局プログラマーさんに助けていただいたのですが、
無駄にすごく時間がかかったので備忘録として残しておきます。

 

 

colorboxを設置する

まずcolorboxを設置します。
設置方法はいろんなところでいろんな人が教えてくれてるのでGoogle先生で調べて設置してみてください。
パターンも1~5くらいまであったので、お好きなやつを使ってみればよいと思います。

ひとまずcolorboxを読み込みます。CDNであるのでそのままコピーしてペぺっとhead内に記述します。
あ、cssはダウンロードせんばでしたね…。
こちらからダウンロードしてください。JSも同じフォルダに入っているので、CDNが嫌な人はそっちで設置しても良いです。

【URL】colorbox

 

//colorbox設置
<link href="自分で指示した階層/css/colorbox.css" rel="stylesheet" type="text/css" media="all" >
<script src="https://cdn.jsdelivr.net/colorbox/1.6.4/jquery.colorbox-min.js"></script>
//colorbox設置完了

 

 

colorboxで動画を表示する

とりあえずコードペンに通常のcolorbox.jsをつかってムービーを表示させてみました。
下記のコードペンはなぜかcolorbox.cssを読み込んでくれなかたので、cssコーナーに直書きしてます。

 

See the Pen colorbox_video_single by sayuri (@giraffeweb) on CodePen.0

 

これだと再生ボタンを押せば再生されるんですが…。
今回はポップアップで開いたら自動再生してほしいんです！

 

 

colorbox表示させた動画を自動で再生する

このままでは自動で再生されない…
ということでJSを以下に書き換え~！

 

//JSを書き換え
$(document).ready(function(){
    $('.inline').on('click', function(){
        $(".inline").colorbox({
            inline: true,
            rel:'group',
			      closeButton:'true',
            onComplete: function(){
            var video = $("#video").get(0).play();
				}
            });	
        });
    });	
//これで自動で再生されるよー！

 

すると~！！再生されて表示されます。
やったー！すごい！

 

See the Pen colorbox_video_autoplay by sayuri (@giraffeweb) on CodePen.0

 

いい感じですね♪
同じようなことしたい方の助けになればいいと思います！
来週はさらに応用編ご紹介します。

Share: