javascript - 嵌入的 YouTube 视频会降低网络速度

Question

我向我的网站添加了一堆嵌入式 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>

Answer 1

我认为我们必须使用视频延迟加载。因此，当页面加载时，我们必须使用 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>