Встроенные видео на 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. Если пользователь нажимает на изображение, мы можем загрузить видео YouTube, используя iframe, а затем воспроизвести его.

Вы можете получить URL-адрес миниатюры из видео YouTube.

<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>