DenayM DenayM - 2 months ago 13
Javascript Question

Closed a modal at the end of the video

I have a video in a modal boostraps. I can not figure out how to do it, to close the modal at the end of the video.

<section class="video">
<button type="button" class="btn btn-lg video__btnModal" data-toggle="modal" data-target="#video__btnModal">VIDEO</button>
<div id="video__btnModal" tabindex="-1" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<video controls id="video1" style="width: 100%; height: auto; margin:0 auto; frameborder:0;">
<source src="./assets/video/video.mp4" type="video/mp4">
<source src="./assets/video/video.mov" type="video/mov">
</video>
</div>
</div>
</div>
</div>
</section>

Answer Source

JS

<script type='text/javascript'>
    document.getElementById('video1').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // What you want to do after the event
    }
</script>

Jquery

$("#video1").on("ended", function() {
   //TO DO: Your code goes here...
      alert("Video Finished");
});

to hide modal you need to call

$('#video__btnModal').modal('hide');// hides the modal 

$('#video__btnModal').modal('toggle');// toggles between hide and show