Куди вставляти згенерований код?

У блок «Довільний HTML» редактора Gutenberg, у віджет HTML або напряму в шаблон теми. Код самодостатній — окремі стилі підключати не треба.

Чи впливає це на перегляди в статистиці YouTube?

Ні. Після кліку вставляється звичайний програвач, і перегляд зараховується як завжди. Не зараховуються лише покази тим, хто відео так і не запустив, — але їх і не було.

Чому для Vimeo треба вказувати прев’ю вручну?

YouTube віддає прев’ю за передбачуваною адресою, а Vimeo вимагає запиту до свого API. Робити такий запит означало б звертатися до зовнішнього сервісу, чого цей інструмент не робить принципово. Тому для Vimeo або вкажіть посилання на власну картинку, або лишиться нейтральна заглушка.

Що з доступністю?

Кнопка відтворення — справжній button з підписом для зчитувачів екрана, а не div. Після кліку фокус переходить на програвач, тож керування з клавіатури не переривається.

Легке вставлення YouTube і Vimeo: генератор фасаду

Вставте посилання на ролики — отримаєте готовий блок, який показує прев’ю і підвантажує програвач лише після кліку. Нуль зовнішніх бібліотек: усе, що потрібно, всередині згенерованого коду.

Посилання на відео По одному в рядку. YouTube: 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 прев'юшки.

Співвідношення сторін

Якість прев'юшки YouTube hqdefault існує для будь-якого ролика. maxresdefault є лише там, де оригінал завантажили у 720p і вище — інакше картинка просто не відкриється, і глядач побачить порожній прямокутник.

Підпис над відео Спільний для всіх роликів. Заголовок після риски у рядку має пріоритет. Підпис також потрапляє у aria-label кнопки та title iframe.

URL власної прев'юшки для Vimeo Vimeo не має передбачуваної адреси кадру, як i.ytimg.com у YouTube: її повертає лише oEmbed API, а запит до нього ми зробити не можемо — інструмент працює без мережі. Тому завантажте кадр у медіатеку сайту й вставте посилання. Без нього буде градієнтна заглушка з кнопкою play.

Поведінка згенерованого блоку Приватний режим GDPR youtube-nocookie.com замість youtube.com і dnt=1 для Vimeo. Кукі й ідентифікатори не ставляться до того, як глядач свідомо натиснув play. Автовідтворення після кліку Додає autoplay=1 у src iframe. Браузер це дозволяє: клік уже був, тобто жест користувача зафіксовано, і глядачу не доводиться тиснути play двічі. loading="lazy" на прев'юшці Картинка нижче першого екрана не вантажиться, доки до неї не дійшли. Якщо відео стоїть у самому верху сторінки — зніміть галочку, інакше прев'юшка з'явиться із затримкою.

Вставте хоча б одне посилання, щоб побачити фасад.

Вставте хоча б одне посилання, щоб отримати код.

Вставляти у Gutenberg-блок «Довільний HTML». Блок містить <style> і <script>: якщо у вас роль без права unfiltered_html або стоїть плагін безпеки, що вирізає скрипти — фасад покаже прев'юшку, але клік не спрацює.

Код збирається у вашому браузері. Ні згенерований блок, ні саме прев'ю не роблять жодного зовнішнього запиту — картинки з i.ytimg.com у прев'ю показані як адреси, а не завантажені.

Один вбудований ролик коштує понад мегабайт до першого кліку

Стандартний iframe YouTube завантажує близько 1,3 МБ у двох десятках запитів до семи сторонніх доменів — ще до того, як відвідувач вирішив дивитися відео. На сторінці з трьома роликами це втричі більше, і майже завжди саме воно псує показники швидкості на мобільних. Фасад вирішує проблему прямолінійно: спершу показується лише картинка-прев’ю з кнопкою відтворення, а справжній програвач вставляється у момент кліку. До кліку сторінка важить на порядок менше. Існує популярна бібліотека для цього, але всі інструкції радять підключати її з чужого CDN — тобто прибрати один зовнішній запит і додати інший. Тут згенерований код повністю самодостатній: стилі й скрипт лежать усередині блоку. Додатковий ефект стосується приватності. Стандартний iframe ставить трекінгові куки ще до перегляду. Домен youtube-nocookie.com відкладає це до моменту відтворення, а фасад — до кліку. Для сайтів, орієнтованих на європейську аудиторію, це прямо стосується вимог щодо згоди на куки.