How do I pause a HTML5 video with JavaScript? [duplicate]

Question

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.

Answer 1

When using jQuery, you'll need to use 'get' first:

$('#videoId').get(0).pause()