我向我的网站添加了一堆嵌入式 YouTube 视频(10-20 个视频),我认为它们会降低我的网站速度
我的问题是如何修复它或者什么是正确的方法?
目前,我只是使用 iframe 将它们添加到我的网站,如下所示
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZD0AYXseGXk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
最佳答案
我认为我们必须使用视频延迟加载。因此,当页面加载时,我们必须使用 HTML 图像标签。如果用户点击图像,我们可以使用 iframe
加载 YouTube 视频,然后播放。
您可以从 YouTube 视频获取缩略图 URL。
<div class="video" data-video="youtube video url">
https://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg
</div>
<script>
$("document").ready(function(e) {
$(".video").off("click").on("click", function(e) {
var video_id = $(this).attr('data-video');
$(".video").html('<iframe src="' + video_id + "'>");
});
});
</script>
关于javascript - 嵌入的 YouTube 视频会降低网络速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60918422/