我的页面上有一堆缩略图,单击这些缩略图可以以模态形式打开嵌入式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插件,而是创建了一个简单的click函数,将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);
});
最佳答案
您是否考虑过懒加载YouTube视频?
我自己没有使用过,但是jQuery plugin会延迟加载YouTube视频。这里是another plugin,它会延迟加载,但是不幸的是,似乎它们都需要jQuery,除非您的站点已经在使用它,否则它并不理想。
SO上也有another answer涵盖了这个问题,可能会给您带来更多的见解。
关于iframe - YouTube嵌入速度减慢的页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31410312/