Видео-фон на сайте используя HTML CSS без JS!
Вставка
- Опубліковано 29 вер 2024
- В этом видео разберем как сделать видео фон на сайте на чистом html5 и css3 и без использования js.
// Ссылки =================
Материалы урока: files.brainscl...
Телеграм чат: t.me/htmlbaseRu
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainsc...
Мой Instagram: / dmitryvalak
#html #css #css3
Супер! Просто и доходчиво. Красавчег!
просто спасибо огромное
этот канал такая находка, особенно спасибо за серию уроков верстки с нуля
You prolly dont care at all but does any of you know a tool to get back into an instagram account..?
I was dumb lost the account password. I appreciate any tips you can offer me!
@Jamie Titus instablaster :)
Спасибо большое, очень помог
при функции overflow: hidden; пропадает само видео. не знаю что делать
9:41 а не легче сразу align-item: center написать чем flex-direction и justify-content? или что то не так будет работать?
объясните кто шарит
Здравствуйте спасибо большое за видео отличная работа,не скажите почему padding-bottom 56.25% ?
Для соотношения сторон 16:9, получается что высота должна быть 56.25% от ширины блока, a padding-bottom в % считается от ширины элемента.
BrainsCloud спасибо большое за ответ
Спасибо за уроки! Хотелось бы увидеть урок о том, как добавлять на сайт незамысловатые анимации фигур, которые просто на фоне летают и тем самым создают какой-то эффект заинтересованности у пользователя.
Можно ли на главной странице мобильной версии сайта на весь экран поставить видео? И можно ли сделать, чтобы оно запускалось автоматом, без кнопки плей?
Вся необходимая мне информация, которую я не мог найти долгое время, оказывается, уместилась в 12 минутах данного видео)
Огромное спасибо за ролик, все доступно и воспринимается на лету!
Спасибо! Классно!!!!Димон давай сними пару уроков про Gulp? Думаю начинающим будет полезно знать!
Дмитрий, здравствуй. Может ты подскажешь.
Я все абсолютно один в один делаю как у тебя на видео, но добавляю свое видео. Но почему то при отображении в браузере оно начинает дергаться. В чем может быть причина?
У меня не работает если окрывать Safari на IOS
Скажите как можно сделать что б и на айфонах работало
Буду благодарен если сделаешь серию уроков по jQuery, хоть какие-то базовые вещи. Чистый JS задолбался учить)
Тебя в топ за старания и качественный контент, братан ты заставляешь привить интерес к написанию сайта с 0
Ждем все когда будет пример многостраничных сайтов!!
Чёткое видео! Прям то что я искал и даже больше! К тому же разширил представление использования псевдокласа ибо сколько примеров видел и всегда для затемнения использовали отдельный блок
Материал как всегда на высоте! :) смотрел твои уроки по верстке, очень классно объясняешь. Жду видео с вёрсткой где нужно применять js :)
У меня возникла проблема . У меня дисплей 3840х2400 и когда я ставлю видео-фон (full hd) то он оставляет белые полосы и не ставится на весь экран . Я пробовал менять дисплей в настройках , но если я поставлю 1920х1080 то у меня появятся чёрные полосы на экране . Что делать ?
ВАШ способ не работает на версии (на версии 98 работает ) 99 / 100 УЖЕ НА РАБОТАЕТ
ПОМОГИТЕ
гугл все поломал
Тег video НЕ РАБОТАЕТ В НОВЫХ ВЕРСИЯХ 99 /100 (до 98 работает только)
Они убрали тег video
Что мне делать ???
Боже ну сколько нужно было прошерстить инет прежде чем найти это видео... Очень ясно и доступно. Спасибо.
А как само фоновое видео закрепить? Просто background: fixed не работает с видео
Ну ты...Профессионал.Продолжай в том-же духе!Удачи!
Все отлично, но один вопрос: нельзя ли просто поставить тег видео, без дополнительных дивов и задать видео: position/top/left/height=100vh/object-fit=cover?
Можно пожалуйста поподробнее с дивами? Я никак не пойму сколько таких оберток нужно делать и как их использовать. Очень хочу в этом разобраться.. Поможешь?
Чет скролл не пропадает:( Хоть с .intro, хоть без intro
Спасибо большье. Ты отлично объясняешь.
За этот офигенный урок отдельное спасибо! Элегантно и функционально
Сделайте пожалуйста урок по ajax форме обратной связи. Что бы можно было отрпавить форму и вместо формы (на месте формы) появлялось собщение спасибо форма отправлена.
Оставляю комментарий для продвижения
наверное вы не ответите но всё же спрошу, почему у меня не на весь экран видео а в плеере появляется?
а как зделать живое видио не на канал а на главный фон ютуба через кансоль
Через Gulp видео вообще не отображаеться
Большое спасибо, Дмитрий! Может у вас появится желание и время для плейлиста "Верстка современного интернет-магазина"?) Может даже сделать такой курс платный? Прям от начала и до размещения на хостинге. Со всеми фишками и особенностями.
Такой вопрос, работает ли этот видеофон на IOS? С их запретом на автопроигрывание видео.
не работает( не пойму. почему
Можешь, пожалуйста, порекомендовать литературу или ресурсы, с которых лучше начать в вебе и дальше по нарастающей. Мб есть какие-то мастхев книги ?
Дмитрий добрый день. Можете подсказать почему у меня в место видео появляется надпись на нем «видео в поддерживаемом формате и MIME-типа не найдено»? Форматы пробовал разные и браузеры, не помогло.
Раскажи как вставить видео
что делать если текст вылез из фона
А как видео зделать со звуком?
Спасибо тебе , наш учитель ;)
Все таки понравилось) лайк
Я ЛЮБЛЮ ТЕБЯ
Спасибо бро ❤❤
а как сделать чтобы видео урезалось не снизу, а сверху?
Спозиционировать видео как bottom: 0 , left: 0;
Лайк и подписка! Решил сверстать шапку сайта, чтобы добавить в неё видео через HTML 5 и CSS. Не знал как это можно было реализовать. Теперь знаю.
Класс!
Подскажите а как прописать со звуком что бы звук был
Прикольно! Не думал, что так можно. Привык как-то JS-овский код воровать для таких целей
Всё получилось,только .intro для меня оказалось лишним. Видео было маленьким и просто не расстягивалось. Знатоки может скажут в чём причина. :)
Здравствуйте! Скажите пожалуйста, этот метод для тильды подойдёт? Через html вставить
Зашел на этот ковер.со.... 200 баксов за видео в 10 секунд, ты издеваешься? Ладно бы там было что то уникальное, но там же просто хлам, которому красная цена 1 цент за целый пак всего раздела!
А, зачем виде без звука? Вы показали как вставить видео для глухих (. Что нужно добавить, чтоб звук был?
Народ, нужна помощь. Есть задача: оптимизировать сайт таким образом, чтобы он при запросе был на 3м месте в поиске. Если кто-то знает как работает поиск в гугле и как можно на него повлиять буду очень признателен.
Здравствуйте! подскажите пожалуйста, а как сделать footer в данном случае, чтобы он не вылезал за пределы видео?
Огромное спасибо!!! Долго искал почему не запускается автоматически видео
Спасибо, помог
Топчик! Без всяких курсов, записей, вебинаров и прочей шелухи. Так держать. Будут ли уроки по созданию многостраничных сайтов для новичков? Видео не выходило уже месяц, надеюсь автор не забил на канал ибо пока единственный канал, где без пафоса и глупых шуток всё объясняется просто и доступно, а это в 2к19 по ходу редкость!
Павел Рендаренко курсы тоже есть, куда без них. Скоро будет новый контент
@@BrainsCloud Они есть, я видел, но Вы не тыкаете ими кажде 3 минуты видео. Всё чётко и по делу, без шуток и нелепого самопиара ИМХО =) За новый видосик спасибо =)
А что скажете по кросбраузерности даного способа вставки видео? А то меня терзают сомнения, что оно заработает на айфоне 11 автоматически.
Круто! Огромное тебе спасибо, всё ясно-понятно, пол дня мучался с видео пока не нашел твоё) Спасибо!
Выпустить бы ещё теперь туториал "Аудио-фон на сайте используя HTML CSS"
Привет, можешь снять урок про видео заставку но чтобы она менялась при наведении мышки на сылки))
Как сделать высоту видео на всю высоту экрана, но при этом чтобы не было вертикального скролла из-за видео
height: 100vh )
Подскажите, пожалуйста, а как сделать так, чтоб вместо надписи была ссылка, а то она у меня не работает (
Мне интересно насколько целесообразно использовать видео на фоне, тем более такого большого разрешения.
спасибо
Спасибо за урок! Получилось!
ПОЛЕЗНОЕ ВИДЕО ЗАЛЕТАЙ
Мужик, просто жму руку!
display: flex; для родителя , margin: auto; для дочернего и все будет по центру )
Привет, а как сделать его со звуком?
спасибо вам :) лучший в своем деле!
А как сделать ротацию фона видео?
Грамотно и просто !!! Спасибо за подсказку.
Спасибо за полезную информацию
Для вк как фон сделать?
ну видео фон
Спасибо за видео! Ёмко и по делу, без воды 👍
А как поверх наложить фото?
Спасибо большое! Все получилось!
спасибо! отличный контент)
Спасибо ! Очень помог:)))
Благодарю и говорю mersi
Супер, большое спасибо
Cпасибо огромное!
Лучший! Лайк и пдписка.
спасибо, помогло)
Я обожаю твои видео)
Продвигайся
Спасибо.
Спасибо :-D
Димас хватит отдыхать, мы тебя заждались)
Еще чуть-чуть )
как всегда на высоте.
супер! подача, голос все на уровне, однозначно лайк и подписка, только не скатись умоляю!!))))
куда не скатиться?
Какой у тебя монитор подключён к маку? ответь плз)
обычный full hd монитор dell 24 дюйма через hdmi
Круто)
Привет, Дима, можешь подсказать, нужно ли образование программиста, что бы в дальнейшем работать веб-разработчиком?
Привет, у меня его нет
Понял, спасибо)@@BrainsCloud
А как зделать фон неподвижним?
постараюсь обяснить: Нужно чтоби фон не проворачивался с текстом. Текст проварачивается а фон закреплен.
Нашел решение?
@@padre4080 да
@@padre4080 background: fixed;
а как сделать чтобы растягивалось на всю высоту при сжатии?
Здравствуйте такая же проблема как у вас, получилось найти решение?
@@Oreo_Raccoon нужно добавить для .video__media "object-fit:cover" и дальше поиграться со значениями высоты и ширины элементов
@@DeIgado95 спасибо за совет, на будущее учту, но я уже просто по другому видео уроку сделал и все норм работает))
@@Oreo_Raccoon если вкратце - каким методом сделали?
@@DeIgado95 Кстати тем же что вы предложили: object-fit:cover