モーダルプラグインで有名なcolorboxを使用してMP4データをモーダル表示するための仕様をメモします。

ファイルの準備

配布先からプラグイン一式をダウンロードします。

ダウンロード

プラグインを設置する

必要なjavascriptを設置します。

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery.colorbox.js"></script>

CSSを設置する

必要なCSSを設置します。

<link rel="stylesheet" type="text/css" href="css/colorbox.css" />

HTMLを記述する

HTMLを記述します。

<p><a href="#video" class="inline-modal">動画をみる</a></p>
<div style="display:none">
<div id="video">
<video id="player" autoplay controls muted loop playsinline>
<source src="movie.mp4">
</video>
</div>
</div>

jsを記述する

初期状態では<video>は表示されないようにするので「display:none」を入れておきます。
class「inline-modal」が設定されているリンクをクリックすると、<video>がモーダルで表示されるようにします。

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

以上です。

比較的簡単に実装できました。

デモ

colorboxは様々なモーダル機能があるので、改めてメモしたいと思います。