Отложенная вставка медиа ресурсов на сайт

Вставка видео с youtube или twitch на сайт довольно обычное дело.  Заходим на страницу с видео, нажимаем на кнопку поделиться, копируем iframe, вставляем в нужном месте и готово, видео сразу же появляется на сайте, но в этом и заключается проблема...

Когда iframe встроен непосредственно в разметку сайта, то как только начинается загрузка страницы и браузер видит iframe он начинает загружать видео и все ресурсы необходимые для работы плеера. Сайт начинает долго грузится и как не странно  жутко лагать вплоть до зависания устройства с которого пользователь посетил сайт. Помимо этого анализ производительности pagespeed insights даже из-за одного видео проседает примерно на 15 пунктов и тут я с ним полностью солидарен, если на сайте стоит preloader, то пользователь вообще может не дождаться загрузки.

Поскольку мне часто приходится иметь дело с такими проблемами я написал небольшой скрипт решающие основные задачи с которыми я сталкивался. Решения в интернете есть ведь идея не нова и проблема известна давно, но они достаточно топорные и сложно расширяемые. Возможно есть какие-то плагины, но к сожалению мне не попадались, да я и не искал. Скрипт написан на чистом js, так  что его можно подключить к любому проекту.

Demo: https://get-web.site/insertmedia.html
Репозиторий на gitHub: https://github.com/get-web/insertmedia

Чтобы начать использовать необходимо подключить скрипт:

<script src="../src/insertmedia.js"></script>

И вызвать его:

document.addEventListener("DOMContentLoaded", function () {
    insertmedia();
});

Можно вызвать с опциями:

document.addEventListener("DOMContentLoaded", function () {
  insertmedia({
    delay: 300, // Задержка. default: 300ms
    immediately: true, // тип задержки true/false. Сразу или по очереди каждый "delay" милисекунд. default: true - сразу
    attr: 'data-insertmedia', // Атрибут с конфигурацией вставки. В блок с этим атрибутом будет вставляться наше видео или изображение. default: data-insertmedia
  })
});

Блоку в который будет вставляться видео мы добавляем атрибут с параметрами:

data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }'

Например для вставки видео с ютуба мы можем использовать такие настройки:

<div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }'> </div>

Доступные опции:

type*:  тип вставляемого ресурса. На данный момент это: youtube , twitch , html5 , img
src*: Ссылка на ресурс (видео,картинка..) например: https://example.com/img.jpg
width: Ширина доступная для вставляемого типа ресурса
height: Высота доступная для вставляемого типа ресурса
setting: Настройки доступные для вставляемого типа ресурса
(*) - Обязательно

В общем идея достаточно проста, мы передаем тип ресурса и ссылку на него без параметров, а уже в setting передаются параметры доступные для данного типа ресурса. Например фрейм ютуба по умолчанию выглядит так:

<iframe width="560" height="315" src="https://www.youtube.com/embed/6Q6cCuSvFpI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Мы можем вставить его таким образом (не используя setting или передавая пустую строку "setting": "") :

<div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI" }'> </div>

Но если мы, к примеру, хотим запустить видео автоматически и без звука, фрейм будет таким:

<iframe width="560" height="315" src="https://www.youtube.com/embed/6Q6cCuSvFpI?autoplay=1&mute=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Как вы могли заметить к ссылке были добавлены необязательные параметры ?autoplay=1&mute=1 их мы и передаем в setting при использовании скрипта:

 <div data-insertmedia='{"type" : "youtube", "src" : "https://www.youtube.com/embed/6Q6cCuSvFpI", "setting" : "autoplay=1&mute=1" }'> </div>

То есть любые параметры описанные в документации к youtube вы можете использовать таким образом. Точно так же передаются параметры и другим типам ресурсов в зависимости от их API. Именно поэтому происходит разделение ссылки и параметров, чтобы можно было их интегрировать под любой тип и иметь возможность правильно составлять шаблоны для последующей вставки.

Надеюсь я понятно объяснил и мой труд кому-то будет полезен. Если будут вопросы задавайте их тут. Пишите если что-то нужно добавить или исправить, или если хотите покритиковать.

Источник: https://get-web.site/blog/javascript/43-insertmedia.html