Javascript : Problème arrêté la vidéo après fermeture

Ce que je cherche à faire :

Étape 1 : Je souhaite mettre en place une image où il a par-dessus celle-ci un bouton 'Play".
Étape 2 : En cliquant sur ce bouton 'Play" une vidéo apparaît par-dessus l'image. Cette vidéo se lance automatiquement avec le son, par-dessus celle-ci, il y a un bouton "Fermer".
Étape 3 : En cliquant sur ce bouton "Fermer", je reviens à l'Étape 1.

Le problème que je rencontre, c'est à l'Étape 3, quand je clique sur le bouton "Fermer", la procédure se déroule correctement, mais la vidéo continue sa lecture avec le son en arrière-plan. Pour info j'ai suivie ce TUTO YouTube --> https://www.youtube.com/watch?v=wnseY8goQoc

Si une personne pouvait m'aider pour résoudre ce problème, cela serait génial. Merci par avance.

PS: Dans l'idéal j'aimerai aussi au moment de l'Étape 2 que le panneau de contrôle (Bouton "Pause" "Timeline" "Volume" "Pleine écrans") de la vidéo ne s'affiche pas et que en survolant la vidéo avec le curseur mon bouton "Fermer" apparaisse.

CODE HTML

<div class="container">
        <h1>HOW TITRE</h1>
        <div class="feature-img">
            <img src="/src/photo.webp" width="100%">
            <img src="/src/play.png" class="play-btn" onclick="playVideo('/src/video.mp4')">
            <div class="video-player" id="videoPlayer">
                <video with="100%" autoplay id="myVideo">
                    <source src="/src/video.mp4" type="video/mp4">
                </video>
                <img src="/src/close.png" class="close-btn" onclick="stopVideo()">
            </div>
        </div>
    </div>

CODE CSS

*{
    margin: 0;
    padding: 0;
}
.container {
    width: 80%;
    margin: 80px auto;
}
.container .video-player {
    width: 100%;
}
.container h1{
    padding: 60px 0;
    color: #000;
    font-size: 44px;
    text-align: center;
}
.feature-img {
    margin: 20px 0;
    width: 100%;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}
.play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    transform: translate(-50%,-50%);
    cursor: pointer;
}
.container .video-player {
    width: 100%;
    height: 100%;
}
.video-player {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.video-player video{
    width: 100%;
    margin: auto;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
}
video:focus {
    outline: none;
}
.close-btn {
    position: absolute;
    top: 2%;
    right: 1%;
    width: 4%;
    cursor: pointer;
}

CODE JS

<script>
    var videoPlayer = document.getElementById("videoPlayer");
    var myVideo = document.getElementById("myVideo");

    function playVideo(file){
        myVideo.src = file;
        videoPlayer.style.display = "block";
        myVideo.style.display = "block";
    }

    function stopVideo(){
        videoPlayer.style.display = "none";
        myVideo.style.display ="none";
    };

</script>

Modifié par Snoww (31 Aug 2021 - 11:32)

Pour arrêter la vidéo dans stopVideo :

myVideo.pause();
myVideo.currentTime = 0;