I have a video inserted in a drop down window. So when the user drops the window, the video can be played. However, I want the video to stop playing automatically when the user folds up the drop down window without the need to click on "pause". Below you will find the html and css codes for the video within the dropdown window.
The html for video:
<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>
Here is the 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%;
}
Your help is greatly appreciated!
In this case you'll have to use a little of Javascript to pause the video because HTML/CSS can't do that. Here is the code to put between <script> and </script> tags. It'll pause the video element when the user uncheck the checkbox with id "_1".
document.getElementById("_1").addEventListener("click", function() {
if(!document.getElementById("_1").checked) {
document.querySelector("video").pause();
}
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments