videoタグの動画埋め込み時に、画面クリックで再生、ポーズを設定する方法

#内容
videoタグでの動画埋め込み時は、通常コントローラーの再生ボタン等でしか操作ができない。ただそれだとyoutubeのように動画画面クリックで再生・ポーズに対応するデバイスに慣れている利用者にはUI的にイマイチだと思い方法を模索した。

#実装
動画画面全体を覆う空divを作り、それにjavascriptで再生・ポーズのアクションを割り当ててるだけ。
気をつけた点は、、、

• divで動画全体を覆う際に通常のコントローラーも覆ってしまうと、コントローラーでの操作ができなくなるでその部分のみ覆わないように調整
• 再生、ポーズの動作の違いをstatus変数+ifで調整

##html

<div class="video-wrap">
	<video  muted controls poster="test-movie.jpg" id="video">
	  <source src="test.mp4" type="video/mp4" />
	  <img src="test-movie.jpg" />
	</video>
	<div class="video-btn" id="video-btn"></div>
</div>

##css

.video-wrap {
	position: relative;
}
.video-btn {
	content: "";
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:40px; /*コントローラー分下部に余白を*/
	cursor: pointer;
}

##javascript

    const video = document.querySelector('#video');
    const video_btn = document.querySelector('#video-btn');
    let is_playing = false;

    video_btn.addEventListener('click', () => {
      if (!is_playing) {
        video.play();
        is_playing = true;
      } else {
        video.pause();
        is_playing = false;
      }
    });