the close-btn close the video but the sound still run in background?

how I can make the close-btn close the video and stop it in same time??
the close-btn close the video but the sound still run in background??
do I have any probleme in the code?

<HTMl>
  <head>
      <link rel="stylesheet" href="style.css">
  </head>
<body>
  
<div class="video-player" id="video-player">
<video width="100%" controls autoplay id="myVideo">
  <source src="media/vid1.mp4" type="video/mp4">
</video>
   <img src="media/close.png" class="close-btn"
    onclick="stopVideo()">
</div>


<script>

var Videoplayer = document.getElementById("videoPlayer");
var Videoplayer = document.getElementById("myVideo");

function stopVideo(){

  videoPlayer.style.display = "none";
}

</script>