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

<div id="video">
  <video id="player" controls width="640" height="360">
    <source src="https://try-m.co.jp/wp-content/uploads/2016/09/video.mp4">
  </video>
</div>
#video {
  display: none;
}
$(function() {

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

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

});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.js