【Colorbox】モーダルウィンドウが開くと同時に動画自動再生（ページ内に複数動画があってもOK）

jQueryのモーダルウィンドウプラグインColorbox を利用しているサイトの改修でmp4の動画再生を追加した際に、モーダルウィンドウを開くと同時に再生＆閉じると同時に停止をするのに苦心したのでそのメモです。

コールバックを使ってplayやpauseを走らせる

今回は1つのページに複数動画があったので、リンクのhashを見てその要素の中にあるvideoタグに対して、playとpauseをかけるようにしてみました。

<a href="#video_01" class="inline-modal">動画1</a>
<a href="#video_02" class="inline-modal">動画2</a>

<!--インラインビデオ1-->
<div style='display:none'>
<div id='video_01'>
    <video wwidth="640" height="480" controls preload playsinline>
        <source src="video_01.mp4" type="video/mp4">
    </video>
</div>    
</div> 
<!--インラインビデオ2-->
<div style='display:none'>
<div id='video_02'>
    <video wwidth="640" height="480" controls preload playsinline>
        <source src="video_02.mp4" type="video/mp4">
    </video>
</div>    
</div>

$(".inline-modal").colorbox({
    inline:true,
    onOpen: function(){
        $(this.hash).find("video").get(0).play();
    },
    onCleanup: function(){
        $(this.hash).find("video").get(0).pause();
    }
});

以上が、モーダルウィンドウを開いたときに動画を再生、閉じた時には動画を一時停止するコードです。