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

Обновлено

Видео с nuno можно показать прямо на своём сайте: в статье блога, на лендинге, в карточке товара или в уроке онлайн-курса. Плеер вставляется одним фрагментом HTML-кода — тегом iframe. Файл при этом остаётся на nuno: ваш хостинг не тратит место и трафик, а зритель получает плеер без рекламы.

Где взять код плеера

  1. Откройте страницу видео на nuno.
  2. Щёлкните по плееру правой кнопкой мыши и выберите «Встроить видео».
  3. Отметьте нужные параметры и нажмите «Скопировать».

Получится код такого вида:

<iframe src="https://nuno.ru/embed/ВАШ_ID" width="100%"
  style="aspect-ratio:16/9;max-width:100%" frameborder="0"
  allowfullscreen allow="autoplay; fullscreen; clipboard-write"
  referrerpolicy="strict-origin"></iframe>

Плеер занимает всю ширину блока, в который вставлен, и сам сохраняет пропорции: 16:9 для горизонтального видео и 9:16 для вертикального. Отдельно подбирать высоту под телефон и компьютер не нужно.

Параметры плеера

Параметры дописываются в адрес после знака вопроса. Окно «Встроить видео» делает это за вас, но их можно править и вручную.

  • autoplay=1 — видео запускается само, как только страница открылась.
  • muted=1 — видео стартует без звука.
  • loop=1 — после окончания видео начинается заново.
  • controls=0 — плеер показывается без кнопок и полосы перемотки.

Несколько параметров соединяются знаком &. Например, фоновое видео для первого экрана лендинга:

https://nuno.ru/embed/ВАШ_ID?autoplay=1&muted=1&loop=1&controls=0

Автозапуск со звуком браузеры блокируют — это правило самих браузеров, а не плеера. Поэтому autoplay=1 надёжно работает только вместе с muted=1.

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

Свой HTML. Вставьте код в то место страницы, где должен появиться плеер.

Tilda. Добавьте блок T123 «HTML-код» из категории «Другое» и вставьте код в его содержимое.

WordPress. В редакторе добавьте блок «Произвольный HTML» и вставьте код в него. Визуальный редактор в обычном текстовом блоке тег iframe может вырезать.

Другие конструкторы. Ищите блок с названием «HTML», «Код» или «Вставка» — он есть почти в каждом.

Какие видео можно встроить

Встраиваются видео с доступом «Публично», «На канале» и «По ссылке». Видео «Для подписчиков» в плеере на чужом сайте не откроется: проверить подписку у постороннего посетителя нельзя. О режимах доступа — в статье «Видео по ссылке и настройки приватности».

Видео с доступом «По ссылке» удобно для сайта: на главной nuno и в поиске оно не появляется, а на вашей странице работает как обычно.

Если плеер не появился

  • Проверьте, что код вставлен в блок для HTML, а не в обычный текстовый блок: во втором случае на странице виден сам текст кода.
  • Убедитесь, что видео уже обработалось: сразу после загрузки ему нужно некоторое время.
  • Если видео удалено или закрыто для подписчиков, плеер покажет сообщение вместо ролика.
Загрузить видео