How to stop HTML video while Bootstrap modal is closed?

Question

I using the following code to show the embedded video in modal but when I click the close button the audio in the background doesn't stop. Tried a lot with the provided solutions on Stack Overflow but nothing helped me.

HTML Code :

  <div class="container" id="photocontainer">
<div class="row pt-5 ">
    <div class="col-sm-3" id="photocol">
       <img src="img/Cinematography/1Jacinta-Tyler.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"> 
    </div>
    <div class="col-sm-3" id="photocol">
       <img src="img/Cinematography/2Amanda-Mark.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"> 
    </div>

<div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal();">&times;</span>
    <div class="modal-content">
        <div class="mySlides" >
            <iframe src="player.vimeo.com/video/…; class="mt-5" width="740" height="316" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            <p>
                <a href="vimeo.com/255103005"; id="clr">
                    <b>Jacinta &amp; Tyler</b>
                </a>
            By <a href="vimeo.com/beautifullifestudios"; id="clr">Beautiful Life Studios</a>
            .</p> 
       </div>

Script:

<script>
function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
   for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }

  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
    slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

</script>

Your JavaScript doesn't match your html. What is `mySlides`, `demo` or `caption`? Are you sure the problem is in what you posted. It just looks like the JavaScript alters the UI while the html shows some `img`. Where is `myModal`? Post a [complete example](https://stackoverflow.com/help/mcve). — Jimenemex, Jul 19 '18 at 20:12
Unrelated to your question but is there a reason you use `document.getElementById('myModal').style.display = "block";` instead of `$("#myModal").modal("show")`? — BStill, Jul 19 '18 at 20:13
@Jimenemex Let me show you the .mySlides and infact I've commented the other two classes I mean I'm not using the .demo .caption classes, Just using .mySlides — Habi M, Jul 19 '18 at 20:20
there is code in above comment and sorry it's not properly formated here — Habi M, Jul 19 '18 at 20:27
yup @BStill the reason is that I'm totally new to coding and using this code from another page of my site where I'm showing the picture lightbox type gallery throw this code — Habi M, Jul 19 '18 at 20:31
@HaseebMustafa `.modal("show")` & `.modal("hide")` use the effects. — BStill, Jul 19 '18 at 20:49
`$("video").each(function() { this.pause(); });` you could use this in your close function to pause all videos everytime it closes since you aren't using an Id on your iframe. — BStill, Jul 19 '18 at 20:51
@BStill hwo should I use ,modal("show ") & .modal("hide ") I mean where should? And in later comment you wrote $("video") but I'm using < iframe >tag without any ID so what should I use there exactly ? — Habi M, Jul 19 '18 at 21:01
@HaseebMustafa I editted my answer, replacing the src with itself should pause the video. — BStill, Jul 19 '18 at 21:09
Please read [Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers?](//meta.stackoverflow.com/q/326569) - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer, Jul 22 '18 at 14:36
Hi there. I received [your message here](https://stackoverflow.com/questions/51550119/form-fields-responsiveness-issue?noredirect=1#comment90081562_51550119), in which you said you did not know what I was talking about. Is there something I can help clarify? I am very happy to explain my comments as required. As far as I can tell there was no need to delete the question - did you solve it some other way? — halfer, Jul 27 '18 at 18:09

score 1 · Answer 1 · answered Jul 19 '18 at 20:11

1

you could just pause the video on modal close..

 function closeModal() {
  document.getElementById('myModal').style.display = "none";

  document.getElementById("youVideoId").pause();
}

answered Jul 19 '18 at 20:11

Troll173

46
4

I'm not using any id within my Iframe so what should I do ? I mean what should I write in place of #youvideoid?? can I simply use Iframe in place of #youvideoid? Or will I've to set id for each video? – Habi M Jul 19 '18 at 20:33
As I'm using currently 10 to 15 embedded videos and the number of videos can be increase so please guide me about this . – Habi M Jul 19 '18 at 20:37
then maybe you could just set the iframe source to nothing insted.. $('#iframId').attr('src', ""); – Troll173 Jul 19 '18 at 20:46
I tried using both ways the tagname and the id too but the code isn't working .Is there any other solution ? please guide me – Habi M Jul 19 '18 at 20:48
but if I set the source to nothing then after closing modal it'll not show the video again as there'll not be any src next time – Habi M Jul 19 '18 at 20:50

thezeeshantariq · Accepted Answer · 2018-07-19T21:38:21.840

1

First, clarify either you are using <video> tag or <iframe> tag. If you are using <video> tag, you can assign id to your video e.g <video id="my_video"> and then by using findElementById, you can use play() and pause() methods in your closeModal() function.

Otherwise, if you are using <iframe>, first provide it an id like:

<iframe id="my_vide" class="embed-responsive-item" src="link_to_some_video"allowfullscreen></iframe>

you can do it as follows:

function closeModal() {
    var video = document.getElementById("vid");
    document.getElementById('myModal').style.display = "none";
    document.getElementById('vid').src = '';
}

If you have multiple videos, you can store sources in arrays and can get them by simply passing index for each slide and setting it as a source to your <iframe>.

Here is the code example:

// Video src
 var video_src = [
           "https://www.youtube.com/embed/sdUUx5FdySs?autoplay=1",
           "https://www.youtube.com/embed/YE7VzlLtp-4?autoplay=1"
];

var current_video = "";

var frame = document.getElementById('vid');

// slides
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
  current_video = video_src[n-1];
  frame.src = current_video;

}

edited Jul 19 '18 at 21:38

answered Jul 19 '18 at 20:48

thezeeshantariq

308
2
16

I'm using tag – Habi M Jul 19 '18 at 20:54
and let suppose I've to add 30 or 50 videos then I'll have to give id to all of them? – Habi M Jul 19 '18 at 20:56
Then you can create an array of video sources in javascript, and where you are switching slides `slides[i].style.display = "none"`, after this you can read array e.g `current_src = vid-src[i]` and assign it like `document.getElementById('yourIframeId').src = current_src`. – thezeeshantariq Jul 19 '18 at 21:10
for your 'and let suppose...' question, no you don't. You only have to use one iframe, and you can provide source to it by using array – thezeeshantariq Jul 19 '18 at 21:11
can you please implement it in answer properly? – Habi M Jul 19 '18 at 21:17
first, tell me, do you have single iFrame or multiple? and can you share me that part of the code? – thezeeshantariq Jul 19 '18 at 21:19
i'm using multiple iframes and where should I share the code as here in the comments it's getting proper format – Habi M Jul 19 '18 at 21:35
can you please provide me your email id so that i can send you the code and you can go through it ? – Habi M Jul 19 '18 at 21:43
check your inbox I've sent you the file – Habi M Jul 19 '18 at 21:48
did you check that ? – Habi M Jul 19 '18 at 21:54
Thank you sooo much buddy , your solution worked you are great <3 – Habi M Jul 20 '18 at 01:22

How to stop HTML video while Bootstrap modal is closed?

2 Answers2