Всивка вигдео с 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