Вопрос по работе видео js

Всем доброго дня. У меня очень неудобная ситуация приключилась. Это связано с проигрыванием видео на сайте. Когда я включаю видео, все рабюотает , а так же нормально закрываеться. Но при этом звук продолжает работать (В момент закрытия видео, работает как будто на заднем фоне). Я уже искал где можно, но нигде толком ничего не было сказано. А так же как реализовать функцию при которой закрыть видео можно не только при нажэатие на крестик, но и при щелчке за пределами видео.

        <div class="row">   
               <div class="col">    
                <div class="feuter-img">
                <img src="media/c663e8dd2803d21126882426e7a0cd60.jpg" >
                <img src="img/svg/play-button.png" class="play-btn" onclick="playvideo('video/Warme Theke.mp4')">       
         </div>

    div class="video-player" id="videoplayer">
        <video width="100%" controls autoplay id="video">
            <source src="video/Warme Theke.mp4" type="video/mp4">
        </video>
        <img src="img/svg/stop.png" class="close-btn" onclick="stopvideo() ">
    </div>

***JS***
var videoplayer = document.getElementById("videoplayer");
var video = document.getElementById("video");

function stopvideo(){
    videoplayer.style.display = "none";
$('.close-btn').click(function() {
    p.css('display', 'none');
    $(this).next()[0].pause();
})
    
    }
function playvideo(file){
    video.src = file;
    videoplayer.style.display = "block";
}

P.S Я сам профан в JS и я еще только учусь его использовать. Буду очень благодаре за решения даной проблемы.

Зарание спасибо за помощь.