stop playing embedded flex-videos when modal is closed, includes test

revskill10 · Sep 18, 2012 · d3de082 · d3de082
1 parent 24bd4e9
commit d3de082
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 1 deletion.
diff --git a/test/reveal.html b/test/reveal.html
@@ -38,7 +38,17 @@ <h2>Foundation Reveal Testing</h2>
 			<h3>Reveal &mdash; Simple, Flexible Modal Dialogs</h3>
 			<h4 class="subheader">Modal dialogs, or pop-up windows, are handy for prototyping and production. Foundation includes Reveal our jQuery modal plugin, to make this easy for you.</h4>
 
-			<p><a href="#" data-reveal-id="exampleModal" class="radius button">Example Modal&hellip;</a></p>
+			<p>
+        <a href="#" data-reveal-id="exampleModal" class="radius button">  
+          Example Modal&hellip;
+        </a>
+      </p>
+
+      <p>
+        <a href="#" data-reveal-id="videoModal" class="radius button">
+          Example Modal w/Video&hellip;
+        </a>
+      </p>
 
 		</div>
 	</div>
@@ -65,12 +75,25 @@ <h4 class="subheader">Modal dialogs, or pop-up windows, are handy for prototypin
          <input type="text">
        </div>
     </div>
+
+    <a href="#" data-reveal-id="secondModal" class="radius button">
+      Open Second Modal
+    </a>
     <a class="close-reveal-modal">&#215;</a>
   </div>
 
   <div id="secondModal" class="reveal-modal">
     <h2>This is a second modal.</h2>
     <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
+    <a class="close-reveal-modal">&#215;</a>
+  </div>
+
+  <div id="videoModal" class="reveal-modal large">
+    <h2>This modal has video</h2>
+    <div class="flex-video">
+      <iframe width="800" height="315" src="http://www.youtube.com/embed/IkOQw96cfyE" frameborder="0" allowfullscreen></iframe>
+    </div>
+
     <a class="close-reveal-modal">&#215;</a>
   </div>
 

diff --git a/vendor/assets/javascripts/foundation/jquery.foundation.reveal.js b/vendor/assets/javascripts/foundation/jquery.foundation.reveal.js
@@ -446,12 +446,23 @@
 
       }// end openAnimation
 
+
+      function openVideos() {
+        var video = modal.find('.flex-video'),
+            iframe = video.find('iframe');
+        if (iframe.length > 0) {
+          iframe.attr("src", iframe.data("src"));
+          video.fadeIn(100);
+        }
+      }
+
       //
       // Bind the reveal 'open' event.
       // When the event is triggered, openAnimation is called
       // along with any function set in the options.open property.
       //
       modal.bind( 'reveal:open.reveal', openAnimation );
+      modal.bind( 'reveal:open.reveal', openVideos);
 
       /**
        * Closes the modal element(s)
@@ -668,10 +679,21 @@
 
       }
 
+      function closeVideos() {
+        var video = modal.find('.flex-video'),
+            iframe = video.find('iframe');
+        if (iframe.length > 0) {
+          iframe.data("src", iframe.attr("src"));
+          iframe.attr("src", "");
+          video.fadeOut(100);  
+        }
+      }
+
       //
       // Bind the modal 'close' event
       //
       modal.bind( 'reveal:close.reveal', closeAnimation );
+      modal.bind( 'reveal:closed.reveal', closeVideos );
       //
       // Bind the modal 'opened' + 'closed' event
       // Calls the unlockModal method.