CODEWITHSUNDEEP
javascriptvideohtmlhide
Sarah
Sarah

Reputation: 11

Video stop on div hide

I know this has been addressed before but I don't know enough about code to apply the other solutions to my own problem, since my code is different. My video is not a Youtube video, its just in my web folders.

Basically I have the video popping up in a div on autoplay. When you click of the vid hides, which I want, but the audio keeps playing. I just want the video to stop playing when the div is hidden, and I can't seem to figure out how to plug in the correct code. If someone could help me I'd really appreciate it. Thanks. This is my script:

<script type="text/javascript"> 
document.onclick=check; 
function check(e){ 
var target = (e && e.target) || (event && event.srcElement); 
var obj = document.getElementById('mydiv'); 
if(target!=obj){obj.style.display='none'} 
} 
</script>


 <div id="mydiv"><video autoplay><source src="socialphobiavideo.mp4"></video></div>

Upvotes: 1

Views: 5613

Answers (1)

Zeta
Zeta

Reputation: 105876

Add an id to your <video> and use pause() to stop it:

<script type="text/javascript"> 
document.onclick = function check(e){ 
    var target = (e && e.target) || (event && event.srcElement); 
    var obj = document.getElementById('mydiv'); 
    if(target != obj){
        obj.style.display='none';
        document.getElementById('myvideoelement').pause();
    } 
} 
</script>


<div id="mydiv">
    <video id='myvideoelement' autoplay>
        <source src="socialphobiavideo.mp4">
    </video>
</div>

Upvotes: 1

Related Questions