Menu icon Foundation
Reveal modal with video

I have added a youTube video into a Reveal Modal window, which appears to work fine until you want to load the video again t just displays a blank page within the modal ad nothing happens has anyone experienced this ?

revealmodalVideo

I have added a youTube video into a Reveal Modal window, which appears to work fine until you want to load the video again t just displays a blank page within the modal ad nothing happens has anyone experienced this ?

This post has been closed. No new replies can be added.

Anthony Hind over 5 years ago

Anyone?

Brandon Arnold over 5 years ago

Seems to be working fine on the docs

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

We'd need to see your code to troubleshoot further

Anthony Hind over 5 years ago

Sorry I missed the link to the site

http://www.3d-laser-scanner-hire.co.uk/

 <li><a href="#" data-reveal-id="p20videoModal" class="button">Watch Video</a></li>
        <!-- VIDEO MODAL -->
              <div id="p20videoModal" class="reveal-modal small" data-reveal>
                <h2>The Leica P20 ScanStation is available to Hire and Purchase from M&P Survey.</h2>
                <div class="flex-video">
                        <iframe width="420" height="315" src="//www.youtube-nocookie.com/embed/2-s581LrNsw?rel=0" frameborder="0" allowfullscreen></iframe>
                </div>
                <a class="close-reveal-modal">&#215;</a>
              </div>

          <!-- VIDEO MODAL END -->

Cristyan J. Moreno over 5 years ago

My video keeps on going after closing the reveal modal? Is it flex-video necessary for this to work properly? Am I missing something?

My code:

<a href="#" data-reveal-id="myModal" class="some_class">Some Text</a>

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

Raul Santamaria over 5 years ago

Hello,

I got it working with this Javascript:

    $(document).on('opened', '[data-reveal]', function() {
        $('#myVideo').attr('src','video.mp4');
    });

    $(document).on('closed', '[data-reveal]', function() {

    });

myVideo is the iframe id (or video id if you're using HTML5)

Viv barakat over 5 years ago

I have a slight variation of the initial problem stated by Anthony Hind.

My reveal modal contains a video and it works find. Close it then reopen it and video appears as expected. However, if I have two reveal modals and they both contain videos after opening one of them the video appears normally. However, if this modal is closed then either of the modals opened, any text displays but there is just a blank space where the video should be.

Is it possible to have more than one video in it's own modal in the page? Possibly some javascript patch?

Any help would be great, thanks.

Viv barakat over 5 years ago

I think I have found the answer to problems with multiple videos on this post: http://foundation.zurb.com/forum/posts/1650-issue-with-reveal-and-multiple-embedded-videos

Will go with that and see but looks like it solves the issue.