再生/停止ボタンのクリックでビデオの再生/停止を操作したい

実現したいこと

PCでもスマホでも、ボタンを押してビデオを再生/停止できるようにしたいです。

発生している問題・分からないこと

PCでボタンをクリックするとビデオが停止/再生しますが、スマホでボタンをタップしてもボタン画像の切り替えのみでビデオが停止しません。

該当のソースコード

HTML

1<div class="video__wrapper"> 2 <video autoplay loop muted playsinline src="video/AdobeStock_470975365.mp4"></video> 3 <div class="movie-button-wrapper"> 4 <div class="movie-button"> 5 <span class="movie-button-pause"><img src="img/button_2.png" loading="lazy"></span><!--停止ボタン--> 6 <span class="movie-button-play"><img src="img/button_1.png" loading="lazy"></span><!--再生ボタン--> 7 </div> 8 </div> 9 </div>

CSS

1.video__wrapper{2 position: relative;3 height: 38vh;4 width: 100vw;5 overflow: hidden;6 background-color: #f6f6f6;7 }8 9 video{10 position: absolute;11 top: 55%;12 left: 50%;13 transform: translate(-50%,-55%);14 width: 100%;15 min-height: 100%;16 filter: drop-shadow(0px 0px rgba(0,0,0,0));17 outline: none;18 border: none;19 }20 21.movie-button-wrapper {22 width:20px;23 height:20px;24 position:absolute;25 left:50%;26 bottom:25px;27 cursor:pointer;28 z-index:1;29 }30 31.movie-button {32 display:flex;33 justify-content:center;34 align-items:center 35 animation: fadeIn 3s forwards;36 }37 38@keyframes animation{39 0%{40 opacity:0;41 }42 100%{43 opacity:1;44 }45 }46 47.movie-button span {48 display:flex;49 flex-direction:column;50 justify-content:center;51 align-items:center;52 }53 54.movie-button span img{55 width:30px;56 height:30px;57 }

JQuery

1$(function(){ 2 $('.movie-button-pause').show(); 3 $('.movie-button-play').hide(); 4 $(".movie-button-wrapper").click(function (){ 5 $('.movie-button').toggleClass('show'); 6 if($('video')[0].paused){ 7 $('video')[0].play(); 8 $(this).addClass('current'); 9 }else{ 10 $('video')[0].pause(); 11 $(this).removeClass('current'); 12 } 13 if($('.movie-button').hasClass('show')){ 14 $('.movie-button-pause').hide(); 15 $('.movie-button-play').show(); 16 }else{ 17 $('.movie-button-pause').show(); 18 $('.movie-button-play').hide(); 19 } 20 }); 21 });

試したこと・調べたこと

上記の詳細・結果

teratail、googleで検索しましたが、上記と同様の書き方しか見つけられませんでした。JQueryの知識が浅くどこが原因か分かりません。お力添えいただけますと幸いです。

補足

特になし