由于嵌入的视频太多,我的网站加载缓慢.我看到有图像的地方(嵌入视频的位置)并点击它,此时加载了嵌入的视频.任何人都可以给我一些帮助,想弄清楚如何做到这一点？也许一旦你将鼠标悬停在图像上,如果加载了youtube嵌入？非常感谢！
解决方法
在用户点击图片后,只需使用jQuery插入嵌入代码：
<div id="video" style="background-color:red; width:560px; height:315px;"></div>
jQuery的：
$('#video').on('click',function() {
$(this).html('<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0?autoplay=1" frameborder="0" allowfullscreen></iframe>').css('background','none');
});
如果你想让视频自动播放,可以像我一样在网址的末尾添加？autoplay = 1.
没有缩略图的代码：http://jsfiddle.net/KFcRJ/
HTML：
<div id="video" style="background-color:red; width:560px; height:315px;"> <a href="http://www.youtube.com/watch?v=9bZkp7q19f0" class="youtube"></a></div>
jQuery的：
$('#video').on('click',function() {
$(this).html('<iframe width="560" height="315" src="//www.youtube.com/embed/9bZkp7q19f0?autoplay=1" frameborder="0" allowfullscreen></iframe>').css('background','none');
});
function getYoutubeID(url) {
var id = url.match("[\\?&]v=([^&#]*)");
id = id[1];
return id;
};
$('a.youtube').each(function() {
var id = getYoutubeID( this.href );
this.id = id;
var thumb_url = "http://img.youtube.com/vi/"+id+"/maxresdefault.jpg";
$('<img width="100%" src="'+thumb_url+'" />').appendTo($('#video'));
});
