ドロップダウンが折りたたまれているときにビデオの再生を自動的に停止するにはどうすればいいですか？

Question

ビデオをドロップダウンウィンドウに挿入しました。したがって、ユーザーがウィンドウをドロップすると、ビデオを再生することができます。しかし、「一時停止」をクリックする必要なく、ユーザーがドロップダウンウィンドウをフォールドアップすると、ビデオが自動的に再生されなくなります。下にドロップダウンウィンドウ内のビデオのHTMLコードとCSSコードがあります。

ビデオのためのhtml：

<div class="wrapper"> 
<div class="videng">Click here to watch video</div> 
<input id="_1" type="checkbox"> 
<label class="drop" for="_1">Watch here </label> 
<div class="run"> 

<video width="660" height="410" scrolling="no" controls > 
<source src="videos/speaking/l2_snow.mp4" /> 
</video> 

</div> 
</div> 

ここでは、CSS

.collapse{ 
cursor: pointer; 
display: block; 
background: #999; 
} 
.collapse + input{ 
display: none; 
} 
.collapse + input + div{ 
display:none; 
} 
.collapse + input:checked + div{ 
display:block; 
} 

.wrapper { 
border:1px solid #999; 
padding: 2px; 
width:100%; 
} 

はあなたのヘルプは大歓迎されています！

Answer 1

この場合は、HTML/CSSで再生できないため、動画を一時停止するには少しJavascriptを使用する必要があります。 <script>と</script>タグの間に挿入するコードは次のとおりです。ユーザーがID「_1」のチェックボックスをオフにすると、動画要素が一時停止します。

document.getElementById("_1").addEventListener("click", function() { 
    if(!document.getElementById("_1").checked) { 
     document.querySelector("video").pause(); 
    } 
});