Using Foundation reveal modals with YouTube iframe lazy load lazyYT

Question

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 lazyYT.js to lazy load the videos 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.

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.

Fiddle http://jsfiddle.net/j43aepqh/6/

HTML:

<!-- Triggers the modals -->
<a href="#" data-reveal-id="videoModal" class="radius button">Example Modal w/Video&hellip;</a>


<div id="videoModal" class="reveal-modal large" data-reveal="">
  <h2>This modal has video</h2>
  <div class="flex-video widescreen vimeo" style="display: block;">
    <div class="js-lazyYT" data-youtube-id="_oEA18Y8gM0" data-width="560" data-height="315" data-parameters="rel=0"></div>
  </div>

  <a class="close-reveal-modal">&#215;</a>
</div>
<!-- Reveal Modals end -->


<script>$(document).foundation();</script>
<script>$('.js-lazyYT').lazyYT();</script>

This is driving me mad as I can't get my head around what is happening and how to resolve the issue.

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.

Are there any good scripts for deferring the load of iframes or a way to load them one by one?

Any help or suggestions would be appreciated.

p.s first time using stackoverflow, hope I'm doing it right

Answer 1

I experienced the same problem. I was able to get lazy loading to work using a different script, found here: http://www.labnol.org/internet/light-youtube-embeds/27941/

Let me know if it works for you!

Brent

Answer 2

I have just been dealing with a situation that may be similar. I have thumbnails of 30 or so videos on my homepage and when one is clicked on, a modal window is opened with the iframe video inside.

Previously, I was having large page load times as all the modal windows were being loaded with iframes inside on page load. I also tried js-lazyYT but ran into issues with videos playing after modal closure. I dealt with this in the following way:

HTML

<!-- Image link to modal -->
<div class="small-12 medium-4 medium-pull-8 columns">
    <a class="youtube-modal-reveal" data-reveal-id="{{ videoWorkshop.vID }}">
        <img src="http://img.youtube.com/vi/{{ videoWorkshop.vID }}/sddefault.jpg">
    </a>
</div>

<!-- Modal -->
<div id="{{ videoWorkshop.vID }}" class="reveal-modal large" data-reveal="">
    <div class="flex-video">
    </div>
    <a class="close-reveal-modal">&#215;</a>
</div>

JS

(function() {
    $(".youtube-modal-reveal").each(function( index, element ) {
        // Use the one function as we only need to load the video once, even if they visit the modal multiple times
        $(element).one( "click", function() { 
            var id = $(this).attr("data-reveal-id");
            var flexVideoContainer = $("#"+id).children(".flex-video");
            $(flexVideoContainer).html("<iframe src='//www.youtube.com/embed/" + id + "?rel=0' frameborder='0' allowfullscreen></iframe>");
        });
    });
})();

Answer 3

I would assume you're wanting to do the lazy loading on modal open. Try the following (inside a $(document).ready(...) block):

$(".reveal-modal").on("opened", function () {
  $(this).find(".js-lazyYT").lazyYT();
});

You might also want to destroy the loaded object on close, too.

$(".reveal-modal").on("closed", function () {
  // Implementation left to reader
});