Menu icon Foundation
Stop video when closing a reveal modal with Foundation 6

Just posting this in case it helps someone else using Foundation 6.

I had an issue with a reveal modal containing an HTML5 video. When I closed the reveal modal, the video would continue playing audio.

I had to add the following to the reveal div...

data-reset-on-close="true"

So the full reveal modal markup looks like this...

<!--START Modal -->
    <div class="large reveal" id="myvideo" data-reveal data-reset-on-close="true">
      <div class="flex-video widescreen">
        <video controls>
          <source src="video/video-file.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
      <button class="close-button close-reveal-modal" data-close aria-label="Close reveal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
<!--END Modal -->

Hope this helps someone.

revealfoundation 6modalhtml5Video

Just posting this in case it helps someone else using Foundation 6.

I had an issue with a reveal modal containing an HTML5 video. When I closed the reveal modal, the video would continue playing audio.

I had to add the following to the reveal div...

data-reset-on-close="true"

So the full reveal modal markup looks like this...

<!--START Modal -->
    <div class="large reveal" id="myvideo" data-reveal data-reset-on-close="true">
      <div class="flex-video widescreen">
        <video controls>
          <source src="video/video-file.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      </div>
      <button class="close-button close-reveal-modal" data-close aria-label="Close reveal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
<!--END Modal -->

Hope this helps someone.

Rafi Benkual over 3 years ago

This is helpful! I remember researching this in the past for Foundation 5. It seems like a UI challenge for lot's of people regardless the framework or custom solution. It's great that you were able to find the reset class to do this. 

I believe a destroy event would work programatically as well but this is easier. Thanks for sharing it!

George Taramtilis about 3 years ago

Thank you very much!

I was stuck on this..

B N about 3 years ago

I am stuck on having a youtube video to autoplay on reveal open

any idea how?

Simon Olsen about 3 years ago

Can you do that by editing the URL of the video you're embedding? Try adding ?autoplay=1 to the end.

 

Taken from the example I found on Stackoverflow...

 

...your url would be: http://www.youtube.com/embed/JW5meKfy3fY?autoplay=1

B N almost 3 years ago

I want the video to play when the modal is open

Not before that when the site is loaded

There are several videos on different modals on the same.page and autoplay=1 will play them all at once

Smiley almost 3 years ago

Hi all,

 

Is there a solution for Foundation 5? I have a HTML5 animation in a reveal modal window. In Chrome and Firefox, when you close the reveal the video resets, in IE it continues to play in the background.

 

Any suggestions?

B N almost 3 years ago

What's the solution please and does it work with F6?

Simon Olsen almost 3 years ago

@Smileyblonde Found this thread on the forum about using the modal with F5. http://foundation.zurb.com/forum/posts/1682-my-video-keeps-on-going-after-closing-the-reveal-modal-on-foundation-5

Have you got your video in the flex-video div?

What's your code look like?

@BN my original post has the fix for F6. Ensure you have data-reset-on-close="true" in your reveal div (line 1 of the code example of my original post).

Hope this helps. :)

Smiley almost 3 years ago

Hi Simon,  thanks for your reply. Unfortuanely its not a video, is a html5 animation thats in a reveal modal. I tried the data-reset-on-close="true"on the data reveal but its not working on IE.

 

<div class="large-12 large-centered columns objectHolder">
<object type="text/html" width="100%" height="500" data-dw-widget="Edge" data="/animations/animation.html">
</object>
</div>

Smiley almost 3 years ago

 I fixed the issue using

		<script>
		$(".close-reveal-modal").click(function(){
			 location.reload();
			   });	
		</script>

Paul almost 3 years ago

Thank you, Simon!

Parker Gibson over 2 years ago

You are a life saver! Thank you!

Neil Eisenberg over 2 years ago

Thanks!  This worked for me after trying LOTS of complicated scripting options.  Too bad this isnt better documented, but I appreciate you finding it for us!

Kaya Tuerkay almost 2 years ago

Thank you Simon, this was exactly what I was looking for.

Brom Sulaiman over 1 year ago

Fantastic, just what I was looking for.  Thanks!

Joanna Martin over 1 year ago

fantastic good tips.

Peter Bourne 9 days ago

Really helpful tip - thank you for sharing.

Peter Bourne 9 days ago

Really helpful tip - thank you for sharing.

Peter Bourne 9 days ago

Really helpful tip - thank you for sharing.