Plugin video

index.html

@@ -32,6 +32,7 @@ <h2>Examples</h2>
  <li><a href="#modal-slidefromtop" title="Clicking this link shows the modal">Demo slideFromTop</a></li>
  <li><a href="#modal-bouncefromtop" title="Clicking this link shows the modal">Demo bounceFromTop</a></li>
  <li><a href="#modal-bouncefromtopshaky" title="Clicking this link shows the modal">Demo bounceFromTopShaky</a></li>
+ <li><a href="#modal-html5video" title="Clicking this link shows a modal with HTML5 Video content">Demo HTML5Video</a></li>
  </ul>
 
  <!-- A modal with its content -->
@@ -160,6 +161,21 @@ <h2 id="label-zoomout">A zoomed out modal</h2>
  data-dismiss="modal" data-close="Close">&times;</a>
  </section>
 
+ <section class="modal--show" id="modal-html5video" tabindex="-1"
+ role="dialog" aria-labelledby="modal-label" aria-hidden="true">
+
+ <div class="modal-inner">
+ <div class="modal-content">
+ <video preload="auto" controls>
+ <source src="http:https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
+ </video>
+ </div>
+ </div>
+
+ <a href="#!" class="modal-close" title="Close this modal" data-close="Close"
+ data-dismiss="modal">×</a>
+ </section>
+
 
  <div class="content">
  <p>Disrupt brunch keffiyeh chillwave Williamsburg. Excepteur food truck thundercats voluptate ethical, whatever in craft beer leggings proident Vice pour-over polaroid. Terry Richardson hoodie Truffaut Wes Anderson kale chips, synth nostrud elit sint id cillum bespoke. Semiotics synth Cosby sweater brunch beard, lo-fi esse Godard Echo Park sapiente mollit wayfarers. Cillum lomo cliche, YOLO Cosby sweater fixie tumblr eu umami Schlitz assumenda culpa. Chillwave church-key plaid, labore nulla flannel kogi Tonx single-origin coffee cred ex sustainable. Mlkshk ennui polaroid post-ironic sunt, keytar semiotics sriracha fashion axe labore church-key art party.</p>
@@ -170,5 +186,6 @@ <h2 id="label-zoomout">A zoomed out modal</h2>
  </div>
 
  <script src="modal.js"></script><!-- JS for Modal -->
+ <script src="plugins/html5video.js"></script>
  </body>
 </html>

plugins/html5video.js

@@ -0,0 +1,42 @@
+/*
+ * CSS Modal Plugin for HTML5 Video (play/pause)
+ * Author: Anselm Hannemann
+ * Date: 2014-02-04
+ */
+
+(function (global) {
+
+ 'use strict';
+
+ var CSSModal = global.CSSModal;
+
+ // If CSS Modal is still undefined, throw an error
+ if (!CSSModal) {
+ throw new Error('Error: CSSModal is not loaded.');
+ }
+
+ var videos;
+ var i = 0;
+
+ // Enables Auto-Play when calling modal
+ CSSModal.on('cssmodal:show', document, function (event) {
+ // Fetch all video elements in active modal
+ videos = CSSModal.activeElement.querySelectorAll('video');
+
+ if (videos.length > 0) {
+ // Play first video in modal
+ videos[0].play();
+ }
+ });
+
+ // If modal is closed, pause all videos
+ CSSModal.on('cssmodal:hide', document, function (event) {
+ if (videos.length > 0) {
+ // Pause all videos in active modal
+ for (; i < videos.length; i++) {
+ videos[i].pause();
+ }
+ }
+ });
+
+}(window));