0

On my website I have a video player and some videos, and I cannot make the videos stop when I play another one. If it is possible to do it with CSS would be nice, but if not, then how can I do it with JS on my page with my code?...............................................................................................................................................................................................

<div class="videos">
        <div class="vids">
            <input type="radio" name="video-slide" id="vid1" checked>
            <input type="radio" name="video-slide" id="vid2">

            <video src="video1.mp4" controls class="v1" alt="vid1"></video>
            <video src="video2.mp4" controls class="v2" alt="vid2"></video>
            <div class="dots">
                <label for="vid1" id="btn1"></label>
                <label for="vid2" id="btn2"></label>
            </div>
        </div>
</div>

<style>
.videos{
    background-color: coral;
    width: 60%;
    position: relative;
    margin: 0 auto;
}
.vids{
    background-color: cornflowerblue;
    width: 80%;
    display: flex;
    height: 400px;
    overflow: hidden;
    margin: 0 auto;
}
.vids video{
    width: 100%;
    height: 380px;
}
.vids input{
    display: none;
}
.dots{
    display: flex;
    justify-content: center;
    width: 80%;
    position: absolute;
    bottom: 0;
}
.dots label{
    height: 12px;
    width: 12px;
    background-color: darkslategray;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 8px;
}
.dots label:hover{
    background-color: gray;
}
#vid1:checked ~ .v1{
    margin-left: 0;
}
#vid2:checked ~ .v2{
    margin-left: -100%;
}
#vid1:checked ~ .dots #btn1{
    background-color: white;
}
#vid2:checked ~ .dots #btn2{
    background-color: white;
}
</style>
Ahmad Adibzad
  • 501
  • 2
  • 6
  • 14
Ed Gar
  • 11
  • 4
  • I think there's an onplay event. You could listen for it and pause all other videos. https://stackoverflow.com/questions/5958132/javascript-to-stop-html5-video-playback-on-modal-window-close – Matt Jul 01 '21 at 16:50
  • The fact is that this is for a modal I guess. Mine is a div with the videos in it. – Ed Gar Jul 01 '21 at 19:06

1 Answers1

0

This can be implemented with Javascript...

<script>
var vid1 = document.getElementById("vid1");
document.getElementById("vid1").addEventListener("blur", pauseVid);

function pauseVid() 
   {
        vid1.pause();
   }
</script>

So here we've added an onblur event listener which will call a function to pause the video when the focus of that element(the video) has been lost...you can use the same code for other video ids too...Let me know if it works (:

Harsh
  • 100
  • 1
  • 10
  • Nope man, it didn't work. I change to the other video and the first one is still playing. And even when I play the other one, it's still playing @Harsh – Ed Gar Jul 01 '21 at 20:59