Using Light YouTube Embed with modal (reveal from Foundation) - how to stop video playback after modal window close?

0
votes

I am using the latest Foundation 6.4.x with the Light YouTube Embeds script by @labnol.

I use this code in a standard html page:

<button data-toggle="animatedModalVideoTest1" class="hollow button expanded alert" href="##">View video</button>

And the corresponding Foundation reveal modal is this part:

<div class="reveal" id="animatedModalVideoTest1" data-reveal data-close-on-click="true" data-animation-in="fade-in" data-animation-out="fade-out">
<button class="button  float-right" data-close type="button">
    <span aria-hidden="true">&times;</span> Close modal window
</button>

 <div class="responsive-embed">
   <div class="youtube-player" data-id="xecEV4dSAXE"></div>
 </div>

When I click on "close window", the video keeps playing in the background. Any js pro who can suggest an idea how to stop this would be much appreciated :-)

PS: The video linked here is safe for work (John Oliver)

1
youtubezurb-foundation

1 Answers

0
votes

Try to use ..this link from zurb-forum: https://foundation.zurb.com/forum/posts/39375-stop-video-when-closing-a-reveal-modal-with-foundation-6 .. works for me!

Insert data-reset-on-close="true" into your Markup.

Example

 <div class="large reveal" id="myvideo" data-reveal data-reset-on-close="true">

        <iframe width="560" height="315" src="https://www.youtube.com/embed/xxxyyyzzz?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>

      <button class="close-button close-reveal-modal" data-close aria-label="Close reveal" type="button">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>