Menu icon Foundation
Reveal video keeps playing with nested modal

I have a nested reveal and in the second modal window I have a video playing however whenI close the second nested modal window the video keeps playing in the background. Is there a way to stop the video from playing when the modal window is closed?

            

         <p><a data-open="exampleModal2">Click me for a modal</a></p>

<!-- This is the first modal -->
<div class="reveal" id="exampleModal2" data-reveal>
  <h1>Awesome!</h1>
  <p class="lead">I have another modal inside of me!</p>
  <a class="button" data-open="exampleModal3">Click me for another modal!</a>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<!-- This is the nested modal -->
<div class="reveal" id="exampleModal3" data-reveal>
  <h2>ANOTHER MODAL!!!</h2>
        <div class="flex-video widescreen vimeo">
			<iframe width="1280" height="720" src="//www.youtube-nocookie.com/embed/wnXCopXXblE?rel=0" frameborder="0" allowfullscreen></iframe>
		</div> <!-- end #videoModalTitle -->
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
         

revealnestedVideo

I have a nested reveal and in the second modal window I have a video playing however whenI close the second nested modal window the video keeps playing in the background. Is there a way to stop the video from playing when the modal window is closed?

            

         <p><a data-open="exampleModal2">Click me for a modal</a></p>

<!-- This is the first modal -->
<div class="reveal" id="exampleModal2" data-reveal>
  <h1>Awesome!</h1>
  <p class="lead">I have another modal inside of me!</p>
  <a class="button" data-open="exampleModal3">Click me for another modal!</a>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<!-- This is the nested modal -->
<div class="reveal" id="exampleModal3" data-reveal>
  <h2>ANOTHER MODAL!!!</h2>
        <div class="flex-video widescreen vimeo">
			<iframe width="1280" height="720" src="//www.youtube-nocookie.com/embed/wnXCopXXblE?rel=0" frameborder="0" allowfullscreen></iframe>
		</div> <!-- end #videoModalTitle -->
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
         

This post has been closed. No new replies can be added.

Jack Fearing over 3 years ago

I've also tried to us this code in a js file but it still does;t stop the video from playing.

        reveal : {
          resetOnClose: false
        }
 });


Kayd Withers over 3 years ago

In your foundation.reveal.js file. Just set resetOnClose to true. Then do a rebuild (npm run build).

And that should work.

Jack Fearing over 3 years ago

That did the trick! thanks