Question

我正在创建一个网站，其中包含多个显示在Zurb Foundations中的YouTube iframe显示模式。该网站的完成版本将有大约30个视频，这将产生沉重的负载，并将恶化页面速度。为了解决这个问题，我计划使用lazyYT.js to lazy load the videos它在第一次加载时效果很好，但是在打开模态并完成播放然后关闭模态后，视频将重新启动并在后台播放。

我在延迟加载中尝试了多种变体但没有成功。我认为问题在于揭示没有正确终止iframe或者懒惰的负载被错误地触发。

小提琴 http://jsfiddle.net/j43aepqh/6/

HTML：

＆＃13;

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

＆＃13;

这让我很生气，因为我无法了解正在发生的事情以及如何解决问题。

这是在网站上发布视频的正确有效方式吗？我对使用模态和YouTubes iframe嵌入在单个页面上发布多个视频的任何其他方法持开放态度，而不会导致严重的页面速度问题。

是否有任何好的脚本可以延迟iframe的加载或逐个加载它们？

任何帮助或建议都将不胜感激。

p.s第一次使用stackoverflow，希望我做得对

Answer 1

我遇到了同样的问题。我可以使用不同的脚本来延迟加载工作，可以在这里找到：http://www.labnol.org/internet/light-youtube-embeds/27941/

让我知道它是否适合你！

布伦特

Answer 2

我刚刚处理过可能类似的情况。我的主页上有大约30个视频的缩略图，当点击其中一个时，会打开一个模态窗口，里面有iframe视频。

以前，由于所有模态窗口都在页面加载中加载了iframe，因此我的页面加载时间很长。我也试过js-lazyYT，但在模态关闭后遇到了视频播放的问题。我通过以下方式解决了这个问题：

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

我认为你想要在modal open上进行延迟加载。请尝试以下操作（在$(document).ready(...)块内）：

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

您可能还想在关闭时销毁已加载的对象。

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

使用Foundation透露模态与YouTube iframe延迟加载lazyYT

3 个答案: