Содержание
Как встроить видео из Youtube в приложение на Bubble
Черновик готовит редакция с помощью ИИ. За стандарт издания отвечает главный редактор — Валерий Курземнек.
Поговорим о вещах, актуальных для каждого разработчика: как вставить видео из Youtube в приложении на Bubble. Сделать это можно тремя способами: встроить конкретный видеоклип родным кодом Youtube, сделать это при помощи ID и спарсить URL. Обсудим все три способа и их преимущества.
Самый простой способ: встроить одиночное видео
Тут ничего сложного нет: заходим на страницу с видео, нажимаем на «Поделиться» под ним, а потом кликаем «Встроить». Открывается такое вот окошко:
Копируем iframe-код из поля справа и вставляем его в HTML нашего приложения на Bubble. Все, воспроизведение настроено!
Кстати, iframe-код — гибкий инструмент. Дописывая параметры к адресу встраивания, можно настраивать поведение проигрывателя: например, добавить в код «autoplay=1», и воспроизведение начнется автоматически (с этим следует быть осторожнее — автопроигрывание нравится не всем пользователям). А чтобы ролик повторялся, одного «loop=1» недостаточно: в документации указано, что для зацикливания одиночного видео нужно задать loop=1 и добавить playlist с тем же ID, который уже стоит в пути embed. Например, если добавить в код «autoplay=1», воспроизведение начнется автоматически (с этим следует быть осторожнее — автопроигрывание нравится не всем пользователям). А чтобы ролик повторялся, одного «loop=1» недостаточно: в документации указано, что для зацикливания одиночного видео нужно задать loop=1 и добавить playlist с тем же ID, который уже стоит в пути embed.
Больше параметров есть в официальной документации разработчиков Google.
Дописывать код нужно прямо в ссылку с видео. То есть, с автопроигрыванием и зацикливанием это будет выглядеть так:
<iframe width="560" height="315" src="https://www.youtube.com/embed/L4gvGFZ0O1A?autoplay=1&loop=1&playlist=L4gvGFZ0O1A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
Соответственно, в коде можно изменить и размеры видео с названием.
Способ посложнее: используем ID видео
ID нужно в ситуации, когда нам требуется встроить разные ролики в приложении на Bubble. Сначала поговорим, что такое ID и где его взять. Тут ничего сложного: идентификатор — это набор букв и цифр, которые идут после youtu.be в ссылке.
У Bubble есть простое приложение, которое самостоятельно возьмет ID видео и встроит его в код, чтобы зерокодеру не приходилось ничего писать. Вот ссылка на него. В поле под «Enter Youtube video link» нужно вставить только ID.
Самый сложный способ: парсим URL
Про первые два способа практически все разработчики знают и так. Зато третий подразумевает использование JavaScript-кода, пусть и в небольшом количестве.
Зачем парсить URL? Представим ситуацию: мы получили электронную таблицу с базой данных, а в ней — десятки ссылок на ролики, причем все в разных форматах. Некоторые выглядят как «https://youtu.be/L4gvGFZ0O1A», некоторые как «https://www.youtube.com/watch?v=L4gvGFZ0O1A», а некоторые вообще часть плейлиста в проигрывателе.
Или у нас есть приложение с формой, где мы просим у пользователей видео. Чаще всего требовать вводить ID бессмысленно — не все поймут, некоторые не обратят внимания, и мы получим кучу ссылок как в примерах выше.
Проще настроить парсинг, который будет автоматически извлекать из ссылок ID.
Для этого нужно установить плагин Toolbox, который позволяет писать JS-код в формате «Javascript to Bubble».
1. Прописываем параметры как на картинке ниже.
2. Включаем «Run JavaScript» и вставляем туда следующую функцию:
function getVideoIdFromYoutubeLink(link) {
const url = link.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
return url[2] !== undefined ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
};
function createYoutubeLink(videoId) {
return 'https://www.youtube.com/embed/' + videoId + '?loop=0&playlist=' + videoId + '&autoplay=1&rel=0&modestbranding=1&fs=1&autohide=1&iv_load_policy=3';
};
const videoId = getVideoIdFromYoutubeLink("<<Input Youtube Link's value>>");
if (!videoId) {
bubble_fn_MY_LINK("");
} else {
bubble_fn_MY_LINK(createYoutubeLink(videoId));
}
Код извлекает ID из всех типов видео. Заполучив данные, можно спокойно вставить их как показано во втором примере.
Готово! Эти три способа пригодятся любому зерокодеру для встраивания роликов и автоматизации работы с данными — и на вебе, и на iOS, и на Android.
Что проверить, если встроенное YouTube-видео не работает
Если ролик не появляется в приложении Bubble, полезно пройти короткую диагностику по порядку — от ссылки до политики браузера. Ниже — три зоны проверки и шаблон, который можно адаптировать под свой проект.
1. Формат ссылки: watch против embed. Страница просмотра и адрес для встраивания — разные вещи. Официальная документация по параметрам проигрывателя показывает, что встраиваемый код строится вокруг адреса вида /embed/VIDEO_ID вместе с query-параметрами (player_parameters). Если в HTML попал адрес страницы просмотра, браузер откроет обычную страницу, и встроенный плеер не отрисуется. Проверьте, что в src стоит именно путь embed, а идентификатор извлечён корректно.
2. Разрешение автора на встраивание. Даже правильный адрес embed не сработает, если владелец ограничил встраивание. Документация описывает параметр origin, который указывает домен, где размещён плеер (player_parameters). Корректный origin помогает проигрывателю понять контекст, но не отменяет решение автора. Обходить такие ограничения не нужно и не следует.
3. Автозапуск, звук и политика браузера. Современные браузеры блокируют автозапуск со звуком. Если в ссылке стоит автозапуск, плеер может не стартовать без взаимодействия пользователя. Оставьте запуск по клику и проверьте, начинается ли воспроизведение после действия пользователя. Отдельно проверьте параметр controls: значение 2 устарело, его использование может дать неожиданное поведение (player_parameters).
Отдельно про данные. Если ссылки на видео хранятся в базе Bubble и запросы не возвращают часть записей, причина может быть в правилах приватности: документация советует либо включить Constraint в подходящем правиле, либо переписать выражение на другое поле, либо упростить схему данных (privacy rules). (По данным manual.bubble.io).
Условный пример проверки
Ниже — условная таблица. Это не результат реального запуска. Значения приведены только для иллюстрации логики проверки.
Редакционная карточка проверки
| Проверка | Условное значение | Ожидаемый результат |
|---|---|---|
| Формат src | /embed/L4gvGFZ0O1A |
путь embed, ID извлечён |
| Параметр origin | https://myapp.bubbleapps.io |
домен приложения указан |
| Автозапуск | autoplay=1 |
проверить, начинается ли воспроизведение после действия пользователя |
| controls | controls=1 |
элементы управления отображаются |
| Приватность данных | поле ссылки доступно правилу | запрос возвращает записи |
Шаблон проверки в формате code block
Шаг 1. Взять исходную ссылку из базы.
Шаг 2. Извлечь ID (после youtu.be/ или v=).
Шаг 3. Собрать src: https://www.youtube.com/embed/<ID>
Шаг 4. Добавить origin=<домен приложения>.
Шаг 5. Для теста: autoplay=1; проверить, начинается ли воспроизведение после действия пользователя.
Шаг 6. Убедиться, что controls не равен 2.
Шаг 7. Проверить правило приватности для поля ссылки.
Этот шаблон помогает локализовать проблему: сначала формат, затем разрешение автора, затем политика браузера, и только потом данные. Такой порядок экономит время при отладке.
Частые вопросы
Почему видео открывается по ссылке, но не встраивается в приложение? Скорее всего, в src указан адрес страницы просмотра вместо адреса embed, либо автор ограничил встраивание своего ролика.
Почему автозапуск не срабатывает, хотя параметр добавлен? Браузеры часто блокируют автозапуск со звуком. Для теста можно добавить отключение звука или оставить запуск по действию пользователя.
При чём тут правила приватности Bubble, если проблема с видео? Если ссылки на видео хранятся в базе, ограничения правила приватности могут мешать запросу вернуть нужные записи.