title: Using Foundation reveal modals with YouTube iframe lazy load lazyYT
body: <p>I am creating a site which contains multiple YouTube iframes that appear within Zurb Foundations reveal modals. The finished version of the site will have around 30 videos which will create a heavy load and will deteriorate the page speed. To counter this I was planning to use <a href="https://github.com/tylerpearson/lazyYT" rel="nofollow">lazyYT.js to lazy load the videos</a> It all works great on the first load, however after opening a modal and finishing playing then closing the modal the video will restart and play in the background.</p>
  
  <p>I have tried multiple variations in lazy loading with no success. I assume the problem is with reveal not terminating the iframe correctly or that the lazy load gets triggered incorrectly.</p>
  
  <p>Fiddle
  <a href="http://jsfiddle.net/j43aepqh/6/" rel="nofollow">http://jsfiddle.net/j43aepqh/6/</a></p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Triggers the modals --&gt;
  &lt;a href="#" data-reveal-id="videoModal" class="radius button"&gt;Example Modal w/Video&amp;hellip;&lt;/a&gt;
  
  
  &lt;div id="videoModal" class="reveal-modal large" data-reveal=""&gt;
    &lt;h2&gt;This modal has video&lt;/h2&gt;
    &lt;div class="flex-video widescreen vimeo" style="display: block;"&gt;
      &lt;div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;a class="close-reveal-modal"&gt;&amp;#215;&lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- Reveal Modals end --&gt;
  
  
  &lt;script&gt;$(document).foundation();&lt;/script&gt;
  &lt;script&gt;$('.js-lazyYT').lazyYT();&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is driving me mad as I can't get my head around what is happening and how to resolve the issue.</p>
  
  <p>Is this the correct valid way of posting videos on a site? I am open to any other methods of posting multiple videos on a single page using a modal and YouTubes iframe embed without causing serious page speed problems.</p>
  
  <p>Are there any good scripts for deferring the load of iframes or a way to load them one by one?</p>
  
  <p>Any help or suggestions would be appreciated.</p>
  
  <p>p.s first time using stackoverflow, hope I'm doing it right</p>