flex-video in reveal only showing once

Question

I use the following code to display a youtube video inside a reveal-box

<a href='#' data-reveal-id='myModal1'><img alt="Some text" src="images/logo.png" class="large-6 medium-6 small-6 columns" /></a>
<div id="myModal1" class="reveal-modal small" data-reveal>
    <div class='flex-video'>
        <iframe src="http://www.youtube.com/embed/dQw4w9WgXcQ?rel=0" class='no-border' allowfullscreen></iframe>
    </div>
    <a class="close-reveal-modal">&#215;</a>
</div>

but this works only once... When I open the box, it shows the video perfectly, but when I close it, and re-open it, I only get a white area.
It seems like the flex-video is the problem; when I remove this div, so I put the iframe directly into the reveal-modal div, it works normally, but then obviously the video doesn't scale on different devices

It always worked fine in foundation 4, but now in foundation 5 it does this. Please help. Thank you

I found this on github: github.com/zurb/foundation/issues/3411 That seems to work, how to get this to the people of foundation so they can fix it? — Noweem

Mr. Roze Mr. Roze · Accepted Answer · 2014-02-18T18:32:28

Give your reveal modal an ID (i.e. #myModal)
Go into your foundation.reveal.js file and look for the line of code that reads:

close_video : function (e) { var video = $(this).find('.flex-video'), iframe = video.find('#myModal iframe');
As you can see, in the third line of code I have added the id of #myModal
Open foundation.min.js and find (command+f) the two iframe references, and add your ID (#myModal) to both

flex-video in reveal only showing once

1 Answers