YouTube 嵌入了减速页面

Question

我有一个包含一堆缩略图的页面，当单击这些缩略图时，它们会以模态形式打开嵌入的 youtube 视频。

这里是html：

<li>

                    <div class="videoLd">

                        <a class="video-link" title="Video Title" href="#video" role="button" data-toggle="modal" data-id="youtubeid">

                            <img class="responsive-imamge" src="//www.mysite.com/video.jpg" alt="" >

                        </a>


                            <h4>Video Title</h4>


                        <p>Video Description</p>


                        <div id="video" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                <img src="www.mysite.com/close-modal.png" alt=" ">
                            </button>

                            <div class="modal-body">
                                <div class="video-wrapper">
                                    <!-- on click the iframe will append here -->                                       
                                </div>
                            </div>

                        </div>

                    </div>


                </li>

我正在以这种方式显示 5 个视频缩略图的列表。这确实减慢了我的页面加载时间。在添加视频之前，页面加载速度比我网站上的平均速度快 61%。现在它慢了 21%。

有没有办法优化这些视频，使其仅在点击视频缩略图时加载？

编辑

我想我会更新这个并分享我现在实际使用的东西。我没有使用lazyYT插件，而是创建了一个简单的点击函数，将iframe附加到容器div。视频链接有一个 data-id 属性，其中包含 YouTube 视频 ID。

$('.video-link').on('click', function () {
    var youTubeID = $(this).data('id');
    var code="<iframe width='1280' height='720' src='//www.youtube.com/embed/" + youTubeID + "?rel=0&autoplay=1' frameborder='0' allowfullscreen=''></iframe>";
    $(this).parent().find('.video-wrapper').append(code);
});

Answer 1

您是否考虑过延迟加载 Youtube 视频？

我自己没用过，但是这个jQuery plugin 会延迟加载 Youtube 视频。这是another plugin，它将延迟加载，但不幸的是，它们似乎都需要 jQuery，除非您的网站已经在使用它，否则这并不理想。

SO 上还有another answer 涵盖了这个问题，可能会给你更多的见解。