Iframe 使用YouTube iFrAMY懒惰加载LaZyyt的基础揭示情态动词

我正在创建一个包含多个YouTube iFrame的网站，这些iFrame出现在Zurb的modals中。该网站的最终版本将有大约30个视频，这将造成沉重的负载，并会降低页面速度。为了解决这个问题，我计划在第一次加载时使用它，但是在打开一个模式并完成播放，然后关闭模式后，视频将重新启动并在后台播放

我尝试了多种延迟加载的变体，但没有成功。我假设问题在于没有正确终止iframe，或者延迟加载被错误触发

拨弄

HTML:

这个模型有视频
×
$（document.foundation（）；
$（'.js lazyYT'）.lazyYT（）我也遇到了同样的问题。我能够使用不同的脚本使延迟加载正常工作，如下所示：

让我知道它是否适合你

布伦特
我刚刚处理了一个可能类似的情况。我的主页上有大约30个视频的缩略图，当点击其中一个时，会打开一个模式窗口，其中包含iframe视频

以前，我的页面加载时间很长，因为所有模式窗口都在页面加载时加载了iFrame。我也尝试过js lazyYT，但在模式关闭后播放视频时遇到了问题。我以以下方式处理这一问题：

HTML


×

JS

（函数（）{
$（“.com”）。每个（函数（索引，元素）{
//使用one功能，因为我们只需要加载一次视频，即使他们多次访问modal
$（元素）。一（“单击”，函数（）{
var id=$（this.attr（“数据显示id”）；
var flexVideoContainer=$（“#”+id）.children（“.flex-video”）；
$（flexVideoContainer）.html（“”）；
});
});
})();
我假设您希望在modal open上执行延迟加载。尝试以下操作（在
$（文档）.ready（…）
块中）：

您可能还希望在关闭时销毁加载的对象

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

为此干杯，您对代码做了任何更改吗？我似乎仍在接收关闭的视频触发。抱歉延迟响应。我只能通过重置src和关闭自动停机来让它工作。我使用的另一种替代方法是，让modal close触发空格键，使其暂停。
(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>");
        });
    });
})();

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

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