Поговорим о вещах, актуальных для каждого разработчика: как вставить видео из Youtube в приложении на Bubble. Сделать это можно тремя способами: встроить конкретный видеоклип родным кодом Youtube, сделать это при помощи ID и спарсить URL. Обсудим все три способа и их преимущества.

Bubble — один из мощнейших low-code конструкторов приложений. На нем можно сделать что угодно. О его фичах и особенностях мы рассказываем на двухдневном бесплатном марафоне по разработке без кода. Присоединяйтесь!

Самый простой способ: встроить одиночное видео

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

Копируем iframe-код из поля справа и вставляем его в HTML нашего приложения на Bubble. Все, воспроизведение настроено!

Кстати, iframe-код — гибкий инструмент. Дописывая его, можно менять параметры и качество видео без особых усилий. Например, если добавить в код «autoplay=1», воспроизведение начнется автоматически (с этим следует быть осторожнее — автопроигрывание нравится не всем пользователям). А если дописать «loop=1», то ролик будет начинаться заново сразу после окончания.

Больше параметров есть в официальной документации разработчиков Google.

Дописывать код нужно прямо в ссылку с видео. То есть, с автопроигрыванием и зацикливанием это будет выглядеть так:

<iframe width=”560” height=”315” src=”<https://www.youtube.com/embed/L4gvGFZ0O1A**?autoplay=1&loop=1**”> 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.