Menu icon Foundation
My video keeps on going after closing the reveal modal on Foundation 5

Hey guys,

Any ideas on how configuring reveal modal to stop embedded video after closing the modal? I can't find any documentation on this, although there's a working example in the modal's documentation.

In the past, I was able to code it directly on modal's JS as an isolated plugin. But, as I'm using foundation 5 now, and relying on the foundation.min.js, I don't want to mess with that, and besides, there is a working example in the doc page. That means it is posible via configuration, not coding. The bad thing is it not said how to achieve that.

Or am I doing something wrong?

Here is my code:

<a href="#" data-reveal-id="myModal" class="button">Watch video</a>
            
<div id="myModal" class="reveal-modal small" data-reveal>
  <div>
      <iframe width="520" height="295" src="http://www.youtube.com/embed/_IGS90i-8G4" frameborder="0" allowfullscreen></iframe>
  </div>
  <a class="close-reveal-modal">&#215;</a>
</div>
         

Videorevealmodalyoutube

Hey guys,

Any ideas on how configuring reveal modal to stop embedded video after closing the modal? I can't find any documentation on this, although there's a working example in the modal's documentation.

In the past, I was able to code it directly on modal's JS as an isolated plugin. But, as I'm using foundation 5 now, and relying on the foundation.min.js, I don't want to mess with that, and besides, there is a working example in the doc page. That means it is posible via configuration, not coding. The bad thing is it not said how to achieve that.

Or am I doing something wrong?

Here is my code:

<a href="#" data-reveal-id="myModal" class="button">Watch video</a>
            
<div id="myModal" class="reveal-modal small" data-reveal>
  <div>
      <iframe width="520" height="295" src="http://www.youtube.com/embed/_IGS90i-8G4" frameborder="0" allowfullscreen></iframe>
  </div>
  <a class="close-reveal-modal">&#215;</a>
</div>
         
Rafi Benkual over 5 years ago

I noticed the video does not fit right. If you add a class of flex-video that should help.

<a href="#" data-reveal-id="myModal" class="button">Watch video</a>

<div id="myModal" class="reveal-modal small" data-reveal>
  <div class="flex-video">
      <iframe width="520" height="295" src="http://www.youtube.com/embed/_IGS90i-8G4" frameborder="0" allowfullscreen></iframe>
  </div>
  <a class="close-reveal-modal">&#215;</a>
</div>

It is closing and ending properly on my test site. There must be something else going on.

Cristyan J. Moreno over 5 years ago

Thanks Rafi, I redownloaded a custom foundation with flex-video and it worked like a charm. You guys should put that in the documentation.

Flex-video is necessary in order to reveal to work properly when embedding video.

Thanks again.

Arnaud Butin about 3 years ago

I have the same problem and this solution doesn't work with Foundation 6...

Random Freeform about 3 years ago

I need a solution too!..

though trying to pause vimeo on modal close

Julie Lewis almost 3 years ago

same here.

Bruno Monteiro almost 3 years ago

Hi Guys!

 

Just clean the html of the parent element and you're on the road again:
$('div.whatever_comes_here').html('');

 

Hope it helps anyone out there. 
Cheers (Feel free to buy me a beer )!

 

// Open Video on page load
	$('#modalVideo').foundation('open');
	
	// Kills video on close button
	$('#modalVideo .triggerClose').click(function() {
		$('#modalVideo').foundation('close');
		$('div.flex-video').html('');
	});
	
	
	// Kills video on overlay div
	$('.reveal-overlay').click(function() {
		$('#modalVideo').foundation('close');
		$('div.flex-video').html('');
	});

 

 

Random Freeform almost 3 years ago

Cool beans Bruno! 

Will try this in a few days and report.

Random Freeform almost 3 years ago

Cool beans Bruno! 

Will try this in a few days and report.