Zurb Video Modal - Autoplay on open & Pause on Close

index.html

<div class="body text-center">
  
<div class="reveal" id="exampleModal1" data-reveal>
  
  <video width="100%" controls>
  <source src="http://distribution.bbb3d.renderfarming.net/video/mp4/bbb_sunflower_1080p_30fps_normal.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>
  
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

<p><button class="button" data-open="exampleModal1">Click me for a modal</button></p>

</div>

script.js

$('[data-reveal]').on('open.zf.reveal', function() {
        $('#' + $(this).attr('id')).find('video').get(0).play();
    });
    $('[data-reveal]').on('closed.zf.reveal', function() {
        $('#' + $(this).attr('id')).find('video').get(0).pause();
    });

$(document).foundation();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/plugins/foundation.reveal.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.scss

body {
  padding-top:50px;  
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css" rel="stylesheet" />

zurb-video-modal-autoplay-on-open-pause-on-close.markdown

Zurb Video Modal - Autoplay on open & Pause on Close

A Pen by Robert Annett on CodePen.

License.