Edit Question - KnowledgeHub

Title Body

Initially the video is hidden. When you click the image with ID 3 , the video is visible. I put a button with ID close_video that will hide player. The problem is it's still running video after you click the button. How do I pause the video? The code is: <div id="video" class="popup-video"> <div class="video"> <div class="close_video" id="close_video"> </div> <video id="id_video" width="400" height="257" controls="controls" preload="auto"> <source src="{$content_dir}themes/trendy/video/Wildlife.mp4" type="video/mp4"/> </video> </div> </div> <script> $(document).ready(function(){ $('#3').click(function(){ $("#video").removeClass("popup-video").addClass("popup-video-show"); }); }); </script> <script> $(document).ready(function(){ $('#close_video').click(function(){ $("#video").removeClass("popup-video-show").addClass("popup-video"); }); }); </script> I also tried this: <script> $(document).ready(function(){ $('#close_video').click(function(){ $("#video").removeClass("popup-video-show").addClass("popup-video"); document.getElementById('id_video').pause(); // and $("#id_video").pause(); }); }); </script> Still no effect. The video disappears, but is still running.

Tags (comma-separated) Cancel