Zero block с видеофоном на Тильде. Скрипт для добавления видео на фон
Vložit
- čas přidán 13. 09. 2024
- Cайт школы дизайна и веб-технологий Skizzi: skizzi.pro
Личный сайт: verkoshka.ru
Для записи на курсы создания сайтов и веб-дизайна - пишите мне по контактам выше.
------------------
ВНИМАНИЕ!!!
Этот способ работает через стандартный блок, а он позволяет запускать видео только на компьютере. На телефоне будет отображаться фотография, которую можно загрузить в контенте блока. Самый простой вариант исправить проблему - сделать GIF и загрузить его в качестве фотографии. Получим эффект видео на мобильных устройствах.
------------------
ИНСТРУКЦИЯ:
Вставляем видеофон в ZeroBlock с автовоспроизведением и отключенным звуком.
1. Добавляем ZeroBlock (высота Window Container Height - 100%)
2. Добавляем блок CR01 (добавляем в него видеофон, высота 100vh)
3. Добавляем блок T123 ниже первых двух блоков, вставляем в него скрипт и прописываем свои ID
Замените:
#recXXXXXXXXX - это ID блока CR01
#recYYYYYYYYY - это ID ZeroBlock
Скрипт добавляется в блок ДРУГОЕ►Т123
СКРИПТ копируйте с сайта разработчика, чтобы наверняка: mo-ti.ru/video...
Если по ссылке скрипт недоступен (мало ли), то можете скопировать ниже. НО! Не забудьте заключить скрипт в теги - в угловых скобках напишите script и /script перед скриптом и после него соответственно. Уж простите, CZcams угловые скобки не пропускает. Если описала непонятно, смотрите в видео, как выглядит эта конструкция.
$('#recXXXXXXX').appendTo('#recYYYYYYY .t396__carrier');
Умница! Дай Бог тебе здоровья, уже неделю голову ломаю как вставить фоновое видео на страницу плейлиста своего сайта, со своими песнями хоть и учусь на курсах веб дизайна почти 4 месяца...Живи счастливо и да хранит тебя Бог!
Катерина, добрый день! Спасибо большое! Выручили) Но у меня не отображает в мобильной версии. Подскажите, как адаптировать?
Огрооомное спасибо за видео!! За 5 минут доступно объяснили то, что не могли дать кураторы на курсе по дизайну
Катерина, большое Вам, человеческое, спасибо! Я к этому видео долго шёл....
С одного раза все получилось! Забыл написать. В самой Тильде такие заморочки пишут что мозг рушится. Еще раз благодарю тебя!
красивый голос) спасибо за ценную инструкцию
Спасибо большое, Катерина!!!! Удачи вам и больших успехов во всем!
Тоже не сработал скрипт...
Здесь всё получится только если размещать блоки в правильной последовательности: сначала Zero, потом Блок с видео фоном, потом HMTL блок. Публикуете и всё работает.
Спасибо за информацию. Четко, спокойно и с классным голосом :)
Спасибо большое, то, что нужно прям!
Здравствуйте! Скажите, пожалуйста,где брать скрипты?
Спасибо, первый раз так быстро нашла что мне нужно))))
Супер, Екатерина.
А в мобильной версии не работает, что делать
благодарочка! вы топ
Спасибо, все получилось
Как просто! Спасибо
Спасибо большое!
Катерина подскажите пожалуйста, почему может быть что на компьютере работает, а на моб версии нет?
тоже интересно) удалось разобраться?
Очень полезно. спасибо
Спасибо, всё работает!
Супер! Спасибо)
огромное тебе спасибо!!!
Спасибо!
Спасибо. полезно!
Спасибо за видео Zero block с видеофоном на Тильде.
Спасибо, Кать :)
Продвинутые дизайнеры, вопрос: а есть сток каких-то бесплатных видосов? На видео то тоже небось авторские права действуют...
спасибо!!!
Спасибо
Сделал без кода, а добавил в сам Зеро блок, в графу где с какой секунды до какой поставил определённые, но вот момент, сначала видео проигрывается как надо с настроенной секунды и заканчивается на той секунде которую назначал, но потом видео становится всё равно на эти секунды и начиная заново проигрывать она уже проигрывает полное видео с самого начала до самого конца. Подскажите пожалуйста как сделать так, чтобы цикличность всегда была по настроенным секундам, а не только первое проигрывание?
Такая же проблема
Жаль на мобильных устройствах видео не работает.
Подскажите, столкнулся с тем, что на ноутбуках с включенным по умолчанию масштабированием, видео отображается на половину страницы. Zero Block нормально, а видеоряд нет. Отступов нигде нет, на компьютерах и некоторых ноутбуках всё нормально работает. Высота 100vh на блоке с обложкой и 100% на всех экранах в Zero Block
Все сделал по инструкции, но кнопка плей осталась. Видео не включается само по себе.
а как сделать оптимизацию на телефон и планшеты, у меня не отображаеться фото при публикации CRo1 перекрывает.
Напишите пожалуйста если получилось
Здравствуйте! У вас получилось оптимизировать под телефон?
аналогичный вопрос... с моб не играет видео на фоне, очень жаль!
В мобильной версии не работает видео! и какой от него толк тогда
а как сделать так, чтобы видео на весь экран растягивалось? Остаются полосы по сторонам, при меньшем экране видео прижато к левому борту
Посмотрите настройки блока cr01. возможно там прописаны отступы
Всё получилось. Спасибо! Не могла у себя найти ошибку в коде - вообщем, нужно два нижних подчеркивания. И всё заработало))))))))
Подскажите, пожалуйста, как сделать чтобы фон работал и в мобильной версии сайта?
Спасибо. Подскажите а как зделат чтоби било слишно и звука
А у всех работает видеоподложка в мобильной версии?
На опубликованной странице между циклами есть скачок через черный экран. Хотя в редакторе его нет. Не знаете как это пофиксить?
Почему-то не работает(
Здесь всё получится только если размещать блоки в правильной последовательности: сначала Zero, потом Блок с видео фоном, потом HMTL блок. Публикуете и всё работает.
@@yyanchenko ОГРОМНОЕ СПАСИБИЩЕ!!!
@@yyanchenko спасибо огромное, уже потеряла надежду разобраться, а тут вы
Поработало немножко, после работы с другими блоками фон просто перестал выводиться. Все попытки восстановить или сделать заново четные :(
Быть может эту процедуру нужно делать после того как все будет готово? (самым последнем по очередности) а не первым , как она показала.
Спасмбоо
Может кто-то подскажет, как при этом не потерять фоновое изображение? Чтобы на этапе загрузки видео (или неуспешной загрузки) фоном было изображение.
Главное, обязательно стрелочку удалить
Подскажите, пожалуйста, а может быть такое, что на айфоне видео не будет воспроизводится? На андроиде всё отлично, а заказчица проверяет с айфона у нее не идёт видео
у меня вот на айфоне не отображается
у вас вышло исправить?
у меня не работает
на мобилке видео не воспроизводится
На моб версии не проигрывается видео
не работает, в блок вставляется видео с лк тильды, не понятно даже от куда оно берется
Сложно сказать, что не так, не видя, что Вы делаете. Возможно, где-то нарушаете последовательность действий. Должно работать.
ГДе взять этот скрипт?
Ссылка на скрипт есть в описании к видео.
Один раз получилось, хотя не сразу, а потом поменял zeroblock и все слетело.
Подскажите, где может быть ошибка?
После того когда н*трахался с этим эффектом (переспрашивал кучу народа, в точности никто не подсказал), но разобрался. У меня главной причиной было последовательно построенные блоки. Должно быт 1. Зеро, 2. Блок для видео, 3.HTML блок
@@demmeyer я тоже разобрался почему слетело, подписка кончилась.
А эта функция платная.
@@demmeyer спасибо большое
@@demmeyer от души! спасибо!
@@demmeyer дай бог тебе здоровья хороший человек!)))) а то я уж думал что я идиот и в трёх соснах делаю что-то не так и скрипт не работает)))) последовательность блоков действительно важна! спасибо!)
Все работает но качество видео 360р. Как сделать 720 ?
Вот уж не знаю. Возможно, у Вас интернет притормаживает, поэтому в низком качестве загрузилось. Или в CZcams выставлено 360p, и оттуда подтягивается. Либо Вы изначально взяли фон, у которого только 360p качество. Может, залили к себе на канал, и не успело обработаться в HD? В настройках видеофона, к сожалению, нигде не задаётся качество.
@@verkoshka.design Да в Ютубе по умолчанию у этого видео стоит 360, на 720 надо руками переключать. наверно по этому.
Жаль только на мобильном не срабатывает
все получилось, но только на компьютере( на телефоне не работает(
ага. не нашли ответ, как на смартфоне сделать?
Добрый вечер, я не могу вставить код ,что может быть?
Что значит не можете? А что конкретно Вы делаете и что в итоге происходит?
@@verkoshka.design делаю всё по вашему видео, но не вставляет код в html
@@GoshaNazik Вот я об этом и спрашиваю: как Вы вставляете, что оно не вставляется?
Блок T123. Контент. Скопировать код клавишами Ctrl+C и вставить туда через Ctrl+V. Или правой клавишей мыши вызвать всплывающее меню, там Копировать, а затем в блоке кода Вставить. И Сохранить. Не знаю, что ещё может пойти не так :)
Если всё ещё не получается, можете постучаться в Телеграм и прислать видео, как Вы делаете. Тогда, может, смогу понять, чем помочь.
@@verkoshka.design так и делаю, завтра уже продолжу. Спасибо вам большое! Напишу.
блок t123 только на платной подписке :(
Есть такое. Но можно схитрить и попробовать поставить на фон GIF вместо видео. Просто желаемое видео переконвертировать.
@@verkoshka.design пробовал. Есть ограничение на размер файла. 10мб.
на смартфоне не работает эта анимация
Есть такое. На смартфоне отображается фото, загруженное в контент блока как запасной вариант. Простой выход, если принципиально нужно видео - перегнать видео в gif и загрузить его в фото. Такая анимация будет работать и на компьютере, и на телефоне.
Катерина Веремейчик да, но здесь возникает следующая проблема - тильда не принимает файлы свыше 3gb. Качественный гиф, у меня например, весит больше. Что делать в этом случае?
Копировать урыл видео...
скрипт не работает и блоки скрывать же надо
Ничего скрывать не надо. Скрипт сам всё скрывает. Если что-то не работает, Вы либо допустили ошибку, либо поставили блоки не в том порядке. Любой скрипт на странице всегда должен стоять после всех блоков, к которым он применяется.
не рабочий скрипт почему то
Должен работать. Возможно, Вы не так его скопировали. Берите текст скрипта на сайте по ссылке, CZcams не пропускает угловые скобки. Может, Вы из текста описания копировали и не исправили их. Также рекомендую блок с кодом размещать под блоками, к которым он применяется. Чтобы они успевали прогрузиться браузером до запуска им скрипта. Иначе он может не сработать.
@@verkoshka.design Спасибо, разобрался)нарушил последовательность блоков и код не работал.
Не работает
Должен работать. Возможно, Вы не так его скопировали. Берите текст скрипта на сайте по ссылке, CZcams не пропускает угловые скобки. Может, Вы из текста описания копировали и не исправили их. Также рекомендую блок с кодом размещать под блоками, к которым он применяется. Чтобы они успевали прогрузиться браузером до запуска им скрипта. Иначе он может не сработать.
Вос-хи-ти-тель-но.
На сотках видеофон не пашет ... Салупа полная )
Здесь всё получится только если размещать блоки в правильной последовательности: сначала Zero, потом Блок с видео фоном, потом HMTL блок. Публикуете и всё работает.
Лучший
Спасибо вам, добрый человек!
Спасибо
Спасибо огромное!!!!
спасибо