Адаптивная верстка сайта с SCSS и JS. Объясняю по шагам. CSS Grid, БЭМ. Макет LoftHouse
HTML-код
- Опубликовано: 9 июн 2024
- Адаптивная HTML SCSS верстка сайта из Figma лендинга жилого комплекса LoftHouse.
Макет, материалы и готовый код: t.me/+9XtDDNBdHAk4Yjhi (пост за 06 Мая 2023)
Верстка по пакету из Figma, CSS препроцессор SCSS, использование миксинов и переменных. Медиазапросы и адаптивная верстка. Разметка на основе CSS Grid и Flexbox. JS скрипты для маски номера телефона, скрипт для youtube lightbox видео, скрипт для yandex карты с кастомным пином, тонкой CSS стилизацией и JS настройкой карты.
Подробно с пошаговыми объяснениями для новичков и начинающих. Готовый код к уроку прилагается.
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.
Старт обучения: 01 Июля 2024 года.
💻 Курс "Frontend разработчик. JavaScript + React": webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт обучения: 03 Июня 2024 года.
💻 Курс "Разработка сайтов на PHP + MySQL":
webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.
🏁 Обучение с нуля
💁♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе
💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💈 Сайт школы ВебКадеми: webcademy.ru/
💈 Вступайте в группу Вконтакте: webcademy
💈 Подписывайтесь на Telegram: t.me/webcademynews
Тайм коды:
00:00 Обзор проекта
01:49 Курс по верстке сайтов
04:07 Сборка SCSS в редакторе VS Code
07:20 Структура SCSS файлов
12:55 Шрифты
20:54 Переменные. Цвета
23:58 Базовые стили
Верстка десктоп
26:39 Шапка. Фон
34:53 Шапка. Навигация
51:28 Шапка. Заголовок и адрес
1:12:27 Секция Benefits c иконками
1:25:25 Секция "Наши квартиры"
1:30:35 Стили для отдельной карточки
1:54:09 Секция CTA. Форма заявки
2:16:59 Секция с видео
2:31:17 Секция с картой
2:35:07 Секция Feedback. Форма заявки
2:41:29 Подвал
3:00:36 Декор элементы
3:14:23 Миксин для декор элементов
Мобильная адаптация
3:19:47 Мобильная адаптация. Медиазапрос и миксин
3:27:50 Адаптация шапки
3:36:21 Иконка моб навигации
3:39:36 Мобильная навигация CSS
3:51:54 Мобильная навигация JS
3:58:29 Адаптация секции Benefits
4:05:40 Адаптация секции с карточками
4:12:56 Адаптация секции CTA
4:18:30 Адаптация секции с видео
4:20:46 Адаптация секции с картой
4:22:31 Адаптация секции Feedback
4:24:55 Адаптация подвала
4:27:10 Оптимизация графики
JS Скрипты
4:31:19 JS маска для номера телефона
4:37:43 JS lightbox для youtube видео
Yandex карта
4:42:04 Регистрация в API Yandex карт
4:43:32 Подключение карты на страницу
4:46:30 Центр карты
4:48:12 Кастомная метка
4:54:24 Baloon. Инфобокс с адресом
4:55:42 Настройка и стилизация отображения карты
5:04:50 Финал
Сайт: webcademy.ru/
Вконтакте: webcademy
Telegram канал: t.me/webcademynews
Добрый день!). Выполнил всë по видео не торопясь за 12+ часов.
Получил кучу опыта и закрепил знания с Вашего курса по вëрстке. Спасибо за видео!).
Очень понравилось, что в проекте 1 точка перелома для адаптации, а так же полный курс работы с Яндекс картой + работа с grid.
Огромное спасибо!!!
Уже чувствую,что будет великолепно)
Очень классный формат, великолепно!
Благодарю вас Юрий за ваш труд! Контент на отлично!
Спасибо огромное за Ваш труд, всё доступно объясняли , всё получилось как у Вас!!!
Прекрасный дизайн, очень подробное объяснение, спокойный голос и качественный микрофон. Делал сайты с CSS, теперь узнал про SCSS, миксины, как карту прикрепить и стилизовать. Поставил два лайка (с двух аккаунтов)
Спасибо за комментарий!)
Классный урок! Благодарю! по подаче - все понравилось, без воды, все понятно и по делу.
как всегда много нового и интересного, простыми словами и на наглядном примере)) спасибо за видео
Спасибо за видео-уроки!
Спасибо за видео, очень помогает!
Приятно наблюдать как Вы, Юрий, развиваетесь как преподаватель) Новый формат, я уверен, людям зайдет! 👍 Спасибо за новую порцию мотивации🙌
Спасибо!)
Спасибо за ваш труд!
Спасибо за видео)
спасибо за урок
Обязательно надо сверстать! У Юрия реально дар преподавать Frontend)
Как всегда чётко и без воды!!
@WebCademy, Спасибо за отличный урок . Макет классный. Фичи отличные. Сделать получилось. Как пожелание на будущее покажи js lightbox, JS маска для номера телефона на gulp как их подключать и т.д.. И уроки scss нужны на канал про миксины и т.д некий обзор с примерами показать зачем они нужны + в каких вариантах их стоит прописывать. Коллегам и друзьям данное видео и школу буду рекомендовать и т.д.
Спасибо, очень интересно и макет подобрали отличный!
Очень жду новых уроков от вас. Все понятно, легко учиться и запоминается на ваших примерах. P.S. Я сейчас нарабатываю практику и искал что-то с SCSS, и наткнулся на это видео. Именно с него я начал знакомство с данным каналом. После верстки этого макета, я нашел запись годичной давности в трансляциях, где также использовался SCSS. Было немного неудобно делать его, потому что, ссылаясь на комментарий внизу, уровень преподавания кардинально отличается. В этом видео я впитывал информацию о том, как нужно верстать. В видео годичной давности я сам хотел подсказывать вам в некоторых моментах, опираясь на знания, полученные из этого ролика. Очень жду новых сложных версток с использованием разных тонкостей. Спасибо вам большое!
Спасибо за комментарий, сейчас как раз вышло видео с версткой на Gulp и стрим также по верстке на Gulp сборке.
Видос огонь 🔥🔥🔥
Добрый день. Спасибо за отличный контент! Было бы здорово, если бы сделали подробный урок по валидации и отправке форм. Особенно на примере с маской для международных телефонов.
Согласен, крутые уроки!
Супер!
Огромнейшее спасибо за такое видео! Всё очень полезно. Я первый раз работала с scss, настроила только в Вебшторме, уж очень мне полюбился, пришлось попыхтеть, но на будущее явно это пригодится. Очень ценно, что делитесь такими полезностями, как маска для телефонных номеров, вы просто экономите кучу времени тем, кому это пригодится. Миксины - вещь, очень удобно.
Сначала подключала скрипты в head через defer, но потом пошло что-то не так и видео открывалось не так)), ну что жжжж, пришлось подключить в конце боди, не получилось повыделываться). Ещё очень красивый макет, прям зашёл, захотелось всем показать потом готовую страничку 😁.
Просто вау, что показали как подключить карту.
Ваш контент замечательный. Я столько времени пыталась найти толковое видео по вёрстке с фичами, а тут вы, совпало всё: и макет красивый, и видео на странице, и карта, и анимации изображений. Столько всего полезного, спасибо вам огромное за качественный контент!
Спасибо за комментарий, рад когда у учеников все получается, ну и проекты подбираю интересные. Вот недавно новый урок выпустил, макет Panto главная магазина мебели, посмотрите обязательно.
Вот на счёт я даже очень согласен, почему то масса верстальщиков его боятся как огня! ой а если потом заголовок будет менятся и перенос надо будет с третьего слова..., ну перенеси тэг... если есть сомнения можно ограничить контейнер и поставить тэг есле надо или убтарь есле не надо...
❤❤❤какой красивый сайт❤
Всем привет! Отлично, применение SCSS, Grid и Flexbox, JS 👍
Заметил такой момент: при перестроении карточек в apartments на разрешении менее 640px карточки не встают по центру. Думаю, нужно добавить изначально в .card: {margin: 0 auto}; Тогда все смотрится как надо по центру!
вауу💙💙💙
Круто! Хочу хочу хочу😊
Ждёмсс
Добрый день! Можете ли сделать пример с подключением Google карти?
Вааааааааааааааааааааааааааааааааааааааааааау!!!!!!!!!!!!!!!!!!!!!!!!
Я ещё только,учусь прохожу уроки по портфолио))
Здравствуйте! Очень понятно объясняете! Помогите, пожалуйста, столкнулась с такой проблемой, как установить плагин font fascia в новой версии 2023? Макет открывается без виджетов(где был значок плагины) и в dev mode нет его. В панеле plugins предлагает из community загрузить. Загружаю, а он открывается в пустом новом окне..Как быть?
ждем!
Юрий, спасибо! Отличный материал!
В большинстве случаев обучаюсь по вашем видео!
Возникла проблема, не срабатывает плагин phone mask, не могу разобраться.....
Надо смотреть код, подключили ли файл плагина и файл с масками. Как запускаете.
классный контент, я просто в восторге, а будет продолжение?- как сделать этот сайт под CMS Word Press?
Не планирую. WordPess проходим на курсе по верстке webcademy.ru/htmlstart/
Го видос на тему CSS масок! В ютубе нет нормального современного видео на эту тему.
Как сделать чтобы информация с формы приходила на почту?
Привет, для svg советую использовать спрайты, это удобнее и оптимизирует подзагрузку иконок
в век высокоскоростного интернета, самое то говорить про оптимизацию подзагрузки, ога
Юрий, смотрел ваше видео касаемо тем для vscode раза три, но не могу понять, какая у вас задействована в этом видео.
У palenight шрифт слишком яркий, у material нет затемнения на боковые панели (кроме режима высокого контраста, но он тоже по-другому выглядит).
Подскажите, пожалуйста.
Вроде плагин ayu
не так у меня работает auto-fit как на 4.04.53 минуте, при уменьшении экрана уменьшает только до 2 колонок и уходит за экран и появляется скролл по X, а не уменьшает автоматически потом до одной колонки.
С шрифтами заминка. Гугл фонс по известеым причинам не даёт русские шрифты. Что делать? Пожалуйста научите.
выдает ошибку undefined mixin в коде( и даже в готовом коде из материала к уроку). как фиксить?
Спасибо! Где находится Макет, материалы и готовый код? С уважением к Вам Ахмад
У меня почему-то _base _vars _reset не хотят подключаться.... Перенес код в main и все заработало...
Спасибо Юрий! Отличное видео но я не нашёл - Макет, материалы и готовый код. С уважением Ахмад
Ахмад, добрый день.
1) Заходите в ТГ канал t.me/+9XtDDNBdHAk4Yjhi
2) Находите пост за 6 мая 2023 г. t.me/c/1579074518/144
❤️🔥
Все супер, но почему то к меня lighxbox совсем не работает. Я даже скачал и открыл ваш проект, но все равно lighxbox не работает. Как вы думайте, в чем проблема. Error "linksBtnsSelector" is redeclared вот такая ошибка вылетала
3:43
у меня получилось только так поставить по центру мобаил меню:/
.header__top-row--mobile {
position: fixed;
background-color: black;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items:center;
}
в скачаном архиве где готовый код проекта нет макета, нет картинок, есть только код. И что же делать?
подскажите как найти сылку по Иконка моб навигации
как плагины подключить? нет такой кнопки как на видео.
Как в figma теперь поставить плагин?
У меня теперь только один вопрос: на хостинг выкладывать все scss файлы или только css?
Только CSS. SCSS можете залить для истории для себя или другого разработчика - кто будет поддерживать проект)
hello sir, I followed your all videos. can you give us a link to that Figma file thanks.
Почему у меня свг файлы сразу на весь экран а не как на аидео маленькие?😢
Еще не посмотрел до конца, немного позже, подскажите а полноценная админ панель будет, где хозяин сайта будет сам добавлять и менять информацию на сайт, отслеживать регистрацию пользователей , минуя код. Это принципиально важная часть для любого заказчика. Никто кроме дизайнера верстальщика не сможет самостоятельно изменять код и внешний вид
В этом видео только верстка.
Я когда указываю эти координаты у меня Иран выходит ) как так не могу понять
Здравствуйте, возник вопрос, у вас в процессе верстки получилось большое количество scss файлов, это безусловно удобно, но не повлияет ли это на загрузку сайта, не станет ли он из-за этого долго загружаться у пользователей?
Я только учусь, поэтому подскажите, пожалуйста
Никак не влияет, потому как мы собираем их в один CSS файл, и на сайте загружается один CSS файл.
3:17:10
Если у меня есть другой проект в GULP, где SCSS компилируется в CSS, после установки данного плагина и работы над проектом в галпе, не сломается ли структура CSS файлов ?
Не понял о каком плагине идет речь. Если о Live SASS Compiler, то при работе с gulp сборкой он вам не нужен, не включайте его.
Хорошо. И кстати, при работе с переменными, переменные не определяются в других scss файлах(@@WebCademy
Подскажите пожалуйста, как связать ссылки с мобильного меню с определенными секциями сайта?
Через # ссылаться на ID секции.
А это только мне плохо видно код?
Подскажите , а что у вас за тема стоит в vsc
PaleNight
Скажите пожалуйста, как добавить api яндекс карт в проект на вебпаке? Ничего не получается, даже с документацией...
По идее, так же. Смотрите на ошибки в консоли.
1:14:24 - я вижу стили для IE6/IE7. Вопрос: зачем? Если уже IE не открывается, а вместо него запускается EDGE?
И можно пожалуйста пояснения почему просто не применить display: none?
Это заготовка под класс visually-hidden. В принципе можете удалить код для IE.
@@StarkElessar Если сделать display: none; то этот текст будет недоступен для скринридеров и ПС, а ради них это все и затевалось. Добавить семантики, чтобы элемент формально был на странице, но был скрыт визуально.
@@WebCademy спасибо, а если например делать vissability: hiden, и position: absolute - чтобы вырвать из потока?
@@StarkElessar Такой подход тоже есть. То есть absolute для этого тоже используют.
На этапе адаптива никак не скрывается изначально кнопка nav-btn.... Display: none никак не работает! Что это может быть? Все делаю по вашим шагам.
Проверьте готовый код из урока со своим, где-то допустили ошибку или написали не так как в уроке.
@@WebCademy Банально завис sass compiler, убил 3 часа на поиск ошибки... все ок... случайно зашел в main.css а там трети кода нет! перезапустил sass compiler - все заработало. Знать бы все такие подвохи ))
phone mask js плагин который в коде урока есть в интернете? Не могу найти
Возьмите из архива. В сети есть но ссылки под рукой нет.
добрый день! Видео отличное спасибо!!
Но столкнулся с проблемой при адаптации когда уменбшаю окно браузера справа появляется пустое пространсво и весь контент сжимается изза него , а не растягивается по всему экрану, вроже ничего не пропускал пишу вместе с вами , помогите если знаете решение !!!
Какой-то элемент выходит за пределы ширины экрана и этим провоцирует создание горизонтального скролла.
@@WebCademy это скорее всего те элементы декора) которые делал , они же там на половину выходят за контейнер
@@WebCademy решил проблему тем что заново начал делать но по своему я хз почему так вышло
кста тут на видео такая же проблема что и у меня была 30:20:36 у вас так же)
@@paveltryhan4245 Да, если это элементы декора то к секциям в которых они лежат надо добавить overflow-x: hidden;
а запись будет сохранена?
Да, видео останется на канале.
Где можно взять макет ?
В описании к видео ссылка на макет и код
у меня яндекс карты не подключаются, уже все перепробовал.
П.С В программировании жутко раздражают вот такие не нужные по сути проблемы. Хочется быстренько подключить и дальше работать, но нет по пол дня приходится терять, что бы найти, что же там не так... бесит
Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute вот это чудо при любых попытках подключить api других ошибок нет
как решили проблему?
@@saivengo вообщем вбил в гугл запрос "яндекс карты". Нашел первый попавшийся сайт где карта реально работает. Скопировал код через панель разработчика. Вставил в свой макет. По другому никак не получалось. Час времени потерял пытаясь перебороть проблему.
Попутно узнал, что то что я написал на английском это не связано с картами, а просто предупреждение. Не стал разбираться, что и зачем. Перепсиховал малехо
Самое отвратительное когда сядешь в хорошем настроение че нить по учить или покодить и сразу какая нибудь проблема
И сидишь как дурак пытаешься побыстрее ее решить, а настроение гаснет....
@@i1nostranec332 у меня тоже эта ошибка, почитала, что проблема с cookie, надо вставить атрибут SameSite=None and Secure, но не могу разобраться, куда его вставлять(
Уберите пожалуйста view only на проекте а то невозможно скачать фотографию без градиента
Дублируйте проект себе в черновики, и сможете полностью его редактировать. Если сниму view only - кто угодно сможет внести правки.
Дайте название темы в Vscode
Palenight (Mild Contrast)
как в фигме загрузить сырую фотку в шапке без обработки?
Закиньте картинку и скопируйте на неё стили заливки подобно тем что есть у текущей картинки в шапке.
@@WebCademyя просто обработанную скачал и получается два раза использовал этот эффект. А что делать если боксы не разделяются на три части, а также остаются слипшимися после этих манипуляций 41:23?
@@kolobok1547 Тогда скачайте не обработанную. При экспорте отключите эффект градиента в блоке Fill и другие если они присутствуют.
Почему нельзя здесь оставить нормальную ссылку на макет? Уйму времени потратила, в итоге так и не нашла. Нигде.
Ссылка на пост в блоге со всеми материалами и макетом: webcademy.ru/blog/994/
@@WebCademy Благодарю, всё нашла, всё открылось.
@@WebCademy Юрий, я делаю всё как Вы. Но у меня cscc не коннектится с css. Получается, если только всё сразу в css писать. Но тогда пропадает суть урока. Ещё срабатывает, если подключить cscc/main.css, а не scc/main.css как у Вас . Почему так у меня?
Материал для несколько подготовленных пользователей. "Скопировали код с моего блога....... " Нисколько не сомневаюсь в талантах и навыках автора, но сюда мне ещё рано :(
По факту получилось так, что процесс работы верстальщика занимает 95% процентов потраченного времени, а остальные 5 процентов уже дело за фронтенд- разработчиком, потому что идёт просто вставка уже готового кода + небольшая настройка.
Так с какого зарплата у первого меньше, чем у второго???
По факту, через несколько лет появятся супер-умные нейросети, вот тогда увидишь.....
не дружище! если верстка на уверенном уровне - то это верхушка айсберга! если сайт имеет логику, много джаваскрипт кода, будь какой то сервис и ит...то верстка это 5%! остальное это работа с js и его фреймворками!
по сути это сложный сайт для новичков, но очень легкий для опытных. Тем более когда все настроено. Выкиньте из видео объяснение настроек и прочее и оно уменьшится на половину.
Далее - любой сайт это не одна страница, а множество. Сверстав одну страницу ты можешь половину кода вставлять в следующие, меняя только нужные блоки.
В js же нужно подключить кучу скриптов для более менее рабочего сайта. Туда же базу данных, всякие счетчики и прочее прочее.
В общем там далеко не все так просто как на видео.
Но есть одно но, в реально больших проектах дико не хватает full верстальщиков, которые могут незнать js досконально, но при этом верстают как боги. Такие спецы получают больше frontend, но и знать CSS и Html там надо до последней буквы. Плюс знать JS что бы верстать совместимый сайт
Дружище! Честное слово приятно наблюдать за твоей работой! НО Сорри, ты так много гиперссылок даешь на другие твои уроки, что блуждая по ним, я так запутался((((((. Я так и не смог пройти ни один твой урок более чем на 10%. Мож конечно я по пояс деревянный? Но как то с другими все сростается. Не в обиду пусть это прозвучит. Но факт. Идеи уроков интересные. Но для меня лично, куча потраченого времени в пустую. В частности настройка плагина Live Sass Compiler. Не проще ли, повторить минуту, либо не нагружать лишними гиперссылками и сосредочиться на основной цели. Еще раз извиняюсь, если покажусь резким. Думаю что критика не плохая вещь.
Норм, спасибо за обратную связь. Возможно стоит повторить установку в уроке. В след раз так и сделаю.
С другой стороны не хотелось растягивать время, для тех у кого все уже настроено.
Не вижу целесообразности учить использовать Mixin как Placeholder, лучше было бы сразу объяснить как правильно
Не понял о каком миксине идет речь.
Вообще не чего понять не возможно самого начала,куда что выбирать и добавлять,scss это должно быть элементарно но не у каждого автора.
Тут все для детей буквально 😂
Показали как установить scss, live server и т.д. Потом показали структуру проекта.
Если для тебя даже такое вызывает проблемы, то для тебе плохие новости...
@@evdokia2342 видимо это у тебя проблемы, а то что мне надо я и так хорошо знаю, без этого бреда.
Кто уже фронтэндерит за деньги?
Пока что бесплатно делаю)
Я делаю пока что плачу
@@alexhitch9326 что платишь?
Бэкэндерю
Выучил вёрстку нужен js
Выучил js
Нужен typescript
Выучил его нужен nod js
Выучил его нужен Битрикс 24
Выучил его ужны другие библиотеки js плюнул нахуй и ушел на завод
Слишком много говоришь, затягиваешь видео
Худший препод на ютубе ...Не знаю, может он только за деньги что то объясняет, что к чему и почему . Видео 5 часов просто "вот так я верстаю". Начал, нужно довести дело до конца. Не попадитесь на 5ти часовую ловушку .
Прям худший? Вы список составили, там наверно около сотни авторов, и я прям худший? За слова отвечаете?
Макет и урок не для новичков.
Посмотрите урок более начального уровня: ruclips.net/video/PoJaRi7Ug7Q/видео.html
Или может вам стоит начать с тегов и установки редактора. Такой контент тоже есть на канале.
Здравствуйте!
Настроился поверстать с вами, а с Live Sass Compiler появились проблемки. Внес все ваши настройки в settings.json и VS Code вывалил несколько ошибок...соответственно при их наличии compiler не работает...
Вот они:
Must start with any of:
`/` or `\` (for workspace root)
`~/` or `~\` for relative to the file being processed. Must not end with a path separator (`/` or `\`)
-
относится к "savePath": "~/../css/"
Must start with a path separator (`/` or `\`)
-
относится к "**/node_modules/**", ".vscode/**"
Только у меня одного так?
upd. с ошибками разобрался, в save path убрал конечный слэш - "savePath": "~/../css" и другие строчки тоже поменял на "/**/node_modules/**", "./vscode/**"
но теперь у меня при запуске compiler генерируются файлы .css и .min.css в каждой папке с проектами...
Странно, а что у вас за ОС? НА Mac и Windows все работает с указанными настройками. В общем да, возможно настройки надо поправить под вашу ОС или ее настройки.
@@WebCademy у меня Windows 10
Зачем городить модификатор для контейнера (--small), если можно просто выровнять флексовые элементы по центру? justify-content: center;
Если это решает задачу - тогда можно и так.
Неужели кто-то ещё создаёт "велосипед"
Каждый конструктор велосипедов должен создать свой. А обычному потребителю - хватит и велопроката, даже покупать не нужно.
@@WebCademy я не спорю что Вы крутой кодер (это видно)..НО..я выбираю более лёгкие решения которые приносят более быстрые 💲
это ведь обучающее видео. Тут как с машиной. Ты можешь научиться водить, но если ты не способен элементарные вещи починить в поле, то лучше за город не выезжать. Потому что что то сломается и можно помереть если сильно не повезет.
Я в своей работе заметил, что очень часто даже в простых проектах нужно лезть под "капот" готовых решений и там все переделывать
запись будет сохранена?
Да, видео останется на канале.