Лёгкая вставка YouTube и Vimeo: генератор фасада
Вставьте ссылки на ролики — получите готовый блок, который показывает превью и подгружает плеер только после клика. Ноль внешних библиотек: всё, что нужно, внутри сгенерированного кода.
watch?v=, youtu.be, /embed/, /shorts/, youtube-nocookie.com. Vimeo: vimeo.com/ID, player.vimeo.com/video/ID, приватные vimeo.com/ID/ХЕШ. Метка времени ?t= / &start= переносится в фасад.
Необязательные уточнения через вертикальную черту: URL | Заголовок | URL превью.
Ш:В или Ш/В. Идёт в CSS-свойство aspect-ratio.
hqdefault существует для любого ролика. maxresdefault есть только там, где оригинал загрузили в 720p и выше — иначе картинка просто не откроется, и зритель увидит пустой прямоугольник.
aria-label кнопки и title iframe.
i.ytimg.com у YouTube: его возвращает только oEmbed API, а запрос к нему мы сделать не можем — инструмент работает без сети. Поэтому загрузите кадр в медиатеку сайта и вставьте ссылку. Без него будет градиентная заглушка с кнопкой play.
Вставьте хотя бы одну ссылку, чтобы получить код.
Вставлять в Gutenberg-блок «Произвольный HTML». Блок содержит <style> и <script>: если у вас роль без права unfiltered_html или стоит плагин безопасности, вырезающий скрипты, — фасад покажет превью, но клик не сработает.
Код собирается в вашем браузере. Ни сгенерированный блок, ни само превью не делают ни одного внешнего запроса — картинки с i.ytimg.com в превью показаны как адреса, а не загружены.
Один встроенный ролик стоит больше мегабайта ещё до первого клика
Стандартный iframe YouTube загружает около 1,3 МБ в двух десятках запросов к семи сторонним доменам — ещё до того, как посетитель решил смотреть видео. На странице с тремя роликами это втрое больше, и почти всегда именно оно портит показатели скорости на мобильных. Фасад решает проблему прямолинейно: сначала показывается только картинка-превью с кнопкой воспроизведения, а настоящий плеер вставляется в момент клика. До клика страница весит на порядок меньше. Существует популярная библиотека для этого, но все инструкции советуют подключать её с чужого CDN — то есть убрать один внешний запрос и добавить другой. Здесь сгенерированный код полностью самодостаточен: стили и скрипт лежат внутри блока. Дополнительный эффект касается приватности. Стандартный iframe ставит трекинговые куки ещё до просмотра. Домен youtube-nocookie.com откладывает это до момента воспроизведения, а фасад — до клика. Для сайтов, ориентированных на европейскую аудиторию, это прямо касается требований о согласии на куки.