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。视频的 link 具有包含 youTube 视频 ID 的数据 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 will lazy load Youtube videos. Here is another plugin 会延迟加载，但不幸的是，它们似乎都需要 jQuery，除非您的网站已经在使用，否则这并不理想它。

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

YouTube 嵌入减速页面

YouTube embeds slowing down page

youtube

iframe

pagespeed