Menu icon Foundation
My audio keeps on going after closing the reveal modal on Foundation 5.5.1

Hey there,

I am fairy new in this and I am having a very similar problem to the already posted "My video keeps on going after closing the reveal modal on Foundation 5" by CRISTYAN J. MORENO a year ago but related to audio. When closing the modal, the audio keeps sounding until its end.

I am only coding in HTML and lelying in Foundation to do the job. Is there any idea on how to make reveal modal to stop when closing the modal?

Thanks in advance,

Code:

<div class="row">
    <div class="small-12 medium-12 large-12 columns">
		<ul class="small-block-grid-1 medium-block-grid-3 large-block-grid-4">
			<li class="caja-monumento">
			    <h6><b>Alhambra y Generalife</b></h6>
				<table>
					<tr>								
						<img class="th audio" src="iconos/Play.png" data-reveal-id="modalAudio-1">
					</tr>
				</table>
			</li>
        </ul>
    </div>
</div>

<!-- Bloque de Modales con audio -->
<div id="modalAudio-1" class="reveal-modal tiny remove-whitespace" data-reveal>
	<div class="row">
		<div class="large-12 columns descripcion">
			<!-- Sección de audio -->
			<audio controls class="th barra-sonido" preload="none">
    			<source src="audio/Granada/1-Alhambra_Generalife-ESP.mp3">
			</audio>
		</div>
	</div>   
	<a class="close-reveal-modal">&#215;</a>
</div>
            

         

audiorevealmodal

Hey there,

I am fairy new in this and I am having a very similar problem to the already posted "My video keeps on going after closing the reveal modal on Foundation 5" by CRISTYAN J. MORENO a year ago but related to audio. When closing the modal, the audio keeps sounding until its end.

I am only coding in HTML and lelying in Foundation to do the job. Is there any idea on how to make reveal modal to stop when closing the modal?

Thanks in advance,

Code:

<div class="row">
    <div class="small-12 medium-12 large-12 columns">
		<ul class="small-block-grid-1 medium-block-grid-3 large-block-grid-4">
			<li class="caja-monumento">
			    <h6><b>Alhambra y Generalife</b></h6>
				<table>
					<tr>								
						<img class="th audio" src="iconos/Play.png" data-reveal-id="modalAudio-1">
					</tr>
				</table>
			</li>
        </ul>
    </div>
</div>

<!-- Bloque de Modales con audio -->
<div id="modalAudio-1" class="reveal-modal tiny remove-whitespace" data-reveal>
	<div class="row">
		<div class="large-12 columns descripcion">
			<!-- Sección de audio -->
			<audio controls class="th barra-sonido" preload="none">
    			<source src="audio/Granada/1-Alhambra_Generalife-ESP.mp3">
			</audio>
		</div>
	</div>   
	<a class="close-reveal-modal">&#215;</a>
</div>
            

         

Rafi Benkual about 3 years ago

This is a common asked question over the web but not really related to Foundation. Basically you need to use jQuery and the closure of the modal to trigger closing the audio/video. I found some links that should help:

http://stackoverflow.com/questions/2128535/stop-a-youtube-video-with-jquery
http://stackoverflow.com/questions/13799377/twitter-bootstrap-modal-stop-youtube-video

Here is a method to trigger some action on a reveal close: reveal - close confirmation http://codepen.io/winghouchan/pen/agsAb

Robert Stark over 2 years ago

foundation 6 for youtube:

<p><a data-toggle="YTMODAL">Click me for a modal</a></p>

      <div class="large reveal" id="YTMODAL" data-reveal data-close-on-click="true" data-animation-in="fade-in" data-animation-out="fade-out">
<div class="flex-video">
        <iframe id="player" width="420" height="315" src="https://www.youtube.com/embed/V9gkYw35Vws?rel=0&wmode=Opaque" frameborder="0" allowfullscreen></iframe>
      </div>
        <button class="close-button" data-close aria-label="Close reveal" type="button">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

var videoURL = $('#player').prop('src');

$('[data-reveal]').on('open.zf.reveal', function() {
videoURL += "&autoplay=1";
$('#player').prop('src',videoURL);
   });

$('[data-reveal]').on('closed.zf.reveal', function() {
videoURL = videoURL.replace("&autoplay=1", "");
$('#player').prop('src','');
$('#player').prop('src',videoURL);
   });

Parker Gibson over 1 year ago

@Robert after deleting the section re: open.zf.reveal, that worked perfectly. Thanks!

Magalie C 9 months ago

Hi,

this can be achieved with the data-reset-on-close attribute with Foundation 6.4.2

http://foundation.zurb.com/sites/docs/reveal.html

Christopher Hardy 9 months ago

I confronted this equal concern and i also have a gulp error try to run the project. I put in all of the node bundles, I begin to run it, and it begins however faults out. Best Essay Writing Services

 

Saul 6 days ago

<div data-reveal ... data-reset-on-close="true" >