Youtube iframe lazy load
网站添加了Youtube的iframe之后，每次打开都很慢。是否有方法加快呢？
查找方案
网络搜索之后，我们找到了youtube lazy load的方案lite-yt-embed，加载一个facade，当用户真正点击视频的时候，才去加载真正的视频。
实施方案
修改youtube shortcode
找到layouts/shortcodes/youtube.html，添加下面的代码。
我们首先从cdn加载了lite-youtube-embed的javascript和css，之后增加了lite-youtube的标签。这里发现如果不加默认图片的话，网络加载还是有问题，因此我们将background-image设置为指定的图片，这样可以正常加载。
1
2
3
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.css" integrity="sha512-jGFXuWMxJUKzdfBmoyqCXz9k2AU3Z/ZNoayoUPEBAtJZjHbTbw50AxTR1ICVPQJbSamH9ny1JwOur0x4WOdcWQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script async src="https://cdnjs.cloudflare.com/ajax/libs/lite-youtube-embed/0.3.2/lite-yt-embed.min.js" integrity="sha512-h9EJXfmlmVdpFZ29kqabqCKeTizzs6ZPILjcJnGptrcYy6WUgMovQRca2KQE93Yp3MDRZoHr2L8GzKkOjQ57eg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<lite-youtube videoid="{{ .Get 0 }}" style="background-image: url('https://img.houzikeji.com/image/ytbdefault.png');" ></lite-youtube>
|
使用shortcode
我们不需要修改之前添加的youtube shortcode，正常使用即可。
1
| {[防止解析]{< youtube QVCEAW_urqk >}}
|
查看效果
更新成功之后，再次查看包含视频的页面，网页打开非常快，不会一直在那里转圈了。
