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