Menu icon Foundation
Using Foundation reveal modals with YouTube iframe lazy load lazyYT

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/

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.

Lazy Load Script: http://tylerp.me/lazyYT/lazyYT.js

<!-- 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>
            

         

revealmodalyoutubeLazy load

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/

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.

Lazy Load Script: http://tylerp.me/lazyYT/lazyYT.js

<!-- 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>
            

         
Luke Robinson over 3 years ago

Hi Chris,

Only two years late; but I have a solution to your problem. I'm using Foundation 5.5.3 and LazyYT v0.1.5.

Cheers,
Luke

<!-- JQUERY and FOUNDATION JAVASCRIPT -->
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="/global/foundation/js/foundation.min.js"></script>
<script src="/global/foundation/js/app.js"></script>

<!-- Lazyload YouTube Videos -->
<script src="/global/js/jquery/lazyYT/lazyYT.js" type="text/javascript" defer="defer"></script>
<script type="text/javascript">
$(document).ready(function () {
  $('.js-lazyYT').lazyYT();
});
</script>

<!-- Stop videos from playing after the modal closes -->
<script>
// Modal window
// When the modal's "X" button is clicked...
$('.close-reveal-modal').click(function() {
	// ...have Foundation close the modal.
	$('.reveal-modal').foundation('close');
	// To prevent the video from playing, remove the YouTube iframe from the DOM...
	$('div.flex-video').remove('iframe');
	// ...and reinitialize the LazyYT plugin...
	$('.js-lazyYT').lazyYT();
	// ...and remove the '.lazyYT-video-loaded' class in the Web page so the video can be replayed.
	$('.js-lazyYT').removeClass('lazyYT-video-loaded');
});

// Modal background overlay
// When the modal's background is clicked...
$(document).on('click', '.reveal-modal-bg', function() {
	// ...have Foundation close the modal.
	$('.reveal-modal').foundation('close');
	// To prevent the video from playing, remove the YouTube iframe from the DOM...
	$('div.flex-video').remove('iframe');
	// ...and reinitialize the LazyYT plugin and...
	$('.js-lazyYT').lazyYT();
	// ...remove the '.lazyYT-video-loaded' class in the Web page so the video can be replayed.
	$('.js-lazyYT').removeClass('lazyYT-video-loaded');
});
</script>