fancyBoxが開いた後にvideoタグの動画を再生する

• Web Create
• 2016.09.09

最近、videoタグを利用する機会が増えました。
fancyBoxとの併用時、モーダルウィンドウが開いたあとに、再生ボタンをクリックするのはサイト閲覧者にとっては、手間に感じてしまうのではないでしょうか。

fancyBoxのコールバックを利用して、開いたあとに動画を再生させるサンプルを書いてみました。

サンプルコード

HTML

<a class="modal" href="#video">動画を再生</a>

<div id="video">
  <video id="player" controls width="640" height="360">
    <source src="video.mp4">
  </video>
</div>

CSS

#video {
  display: none;
}

JS

$(function() {

  $(".modal").fancybox({
    'onComplete': function() {
      vidplay();
    }
  });

  function vidplay() {
    var video = document.getElementById("player");
    if (video.paused) {
      video.play();
    } else {
      video.pause();
    }
  }

});

完成サンプル

下記にてサンプルをダウンロード出来ます！
http://codepen.io/leo-trym/share/zip/jrbNrG/