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

最近、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/

Writer

ko

KO

誕生日に会社のみんなから『世界文学全集』をプレゼントしてもらった読書好きフロントエンド・エンジニアです。WordPressとMovableTypeが得意ですが、本当の特技は薪割りです。

Contact

ご提案依頼、ご相談、お見積もりなど
お気軽にお問合わせください。

03-6303-9671

平日 10:00~19:00

「Web制作について」とお伝え頂ければ
担当者に取次させていただきます。

Mailform

contact@trym.jp
でも受け付けております。