Встраивание видео по клику

Что делает обычное встраивание, пока никто не смотрит

Фрагмент, который вы копируете из меню «Поделиться» под видео, это <iframe>, маленькое окно в другой сайт внутри вашей страницы. Браузер заполняет это окно сразу, как только рисует страницу. Для одного видео YouTube это примерно двадцать запросов и несколько сотен килобайт скриптов с серверов Google для каждого посетителя, включая всех, кто просто пролистывает мимо.

Каждый из этих запросов несёт IP-адрес посетителя и адрес вашей страницы. Плеер к тому же может читать и записывать собственное хранилище в браузере. В итоге ваша страница становится медленнее, а ваших посетителей замечает компания, к которой они не собирались обращаться.

Два вида кода, которые пишет этот инструмент

Загрузка по клику

На странице появляется ссылка, оформленная как кадр видео, с обложкой, треугольником play и доступной подписью. Короткий скрипт, который подключается один раз, ждёт клика по этой ссылке и только тогда подставляет настоящий плеер с autoplay=1, так что на большинстве устройств хватает одного нажатия. Если скрипта нет или он заблокирован, ссылка всё равно работает и открывает видео на платформе в новой вкладке.

Обычный iframe на домене с усиленной конфиденциальностью

Без всякого скрипта. Плеер загружается вместе со страницей, но с youtube-nocookie.com или с Vimeo с dnt=1, и с loading="lazy", так что видео внизу страницы ждёт, пока посетитель до него не долистает.

В обоих случаях плеер находится в блоке, размер которого задан CSS-свойством aspect-ratio, поэтому он подстраивается под любую колонку. Ссылка /shorts/ распознаётся и получает блок 9:16 шириной не больше 360 пикселей.

Обложка: последняя утечка

Для YouTube код загрузки по клику по умолчанию указывает на миниатюру видео на i.ytimg.com. Этот сервер принадлежит Google. Он не ставит cookie, но видит IP-адрес посетителя, когда загружается картинка. Чтобы дойти до нуля сторонних запросов, сохраните кадр из видео, загрузите его на свой сайт и вставьте его адрес в поле обложки. Адрес должен быть https://, потому что браузеры не загружают незащищённые изображения на защищённых страницах.

У Vimeo нет предсказуемого адреса миниатюры, поэтому там по умолчанию показывается тёмный кадр с вашим заголовком. То же поле обложки заменяет его картинкой.

Как вставить код на сайт

На выходе получается обычный HTML со встроенными стилями, поэтому он не зависит от вашей темы.

• WordPress: добавьте блок «Произвольный HTML» и вставьте код. Администраторы могут сохранить часть <script>, но у учётных записей с ролью «Редактор» в мультисайтовой сети она может быть вырезана при сохранении. В этом случае обложка всё равно ведёт на видео, или можно перейти на обычный iframe.
• Squarespace, Wix, Webflow, Shopify: используйте блок кода или встраивания, а не встроенный блок видео, который тут же вернёт стандартный плеер.
• Статический HTML: вставьте туда, где должно быть видео. Если на странице несколько видео, вставляйте каждый фрагмент целиком. Скрипт проверяет, не запускался ли он уже.
• Content-Security-Policy: разрешите www.youtube-nocookie.com или player.vimeo.com в frame-src. Политика, запрещающая встроенные скрипты, заблокирует скрипт загрузки по клику, поэтому вынесите его в файл, который отдаёте сами.

Всегда заполняйте поле заголовка. Оно становится title у iframe и подписью ссылки play, а именно это зачитывает программа экранного доступа. Оставьте его пустым, и слушатель услышит только «YouTube video».