Видео-фон на сайте используя HTML CSS без JS!

Подписаться 177 тыс.

Просмотров 74 тыс.

50% 1

В этом видео разберем как сделать видео фон на сайте на чистом html5 и css3 и без использования js.
// Ссылки =================
Материалы урока: files.brainscloud.ru/file/vid...
Телеграм чат: t.me/htmlbaseRu
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#html #css #css3

Опубликовано:

4 июл 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 128

@Scripeee 4 года назад

Вся необходимая мне информация, которую я не мог найти долгое время, оказывается, уместилась в 12 минутах данного видео) Огромное спасибо за ролик, все доступно и воспринимается на лету!

@lexij_j 4 года назад

Спасибо за уроки! Хотелось бы увидеть урок о том, как добавлять на сайт незамысловатые анимации фигур, которые просто на фоне летают и тем самым создают какой-то эффект заинтересованности у пользователя.

@AlexanderShutter 3 года назад

За этот офигенный урок отдельное спасибо! Элегантно и функционально

@user-yn5yh2wl7u 2 года назад

Чёткое видео! Прям то что я искал и даже больше! К тому же разширил представление использования псевдокласа ибо сколько примеров видел и всегда для затемнения использовали отдельный блок

@volodymyrklyusko6750 5 лет назад

просто спасибо огромное этот канал такая находка, особенно спасибо за серию уроков верстки с нуля

@jamietitus6220 2 года назад

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!

@zanelucca8272 2 года назад

@Jamie Titus instablaster :)

@user-sn1rc5ye5k 4 года назад

Материал как всегда на высоте! :) смотрел твои уроки по верстке, очень классно объясняешь. Жду видео с вёрсткой где нужно применять js :)

@user-iq1fg2um5k 5 лет назад

Тебя в топ за старания и качественный контент, братан ты заставляешь привить интерес к написанию сайта с 0 Ждем все когда будет пример многостраничных сайтов!!

@user-gq8li2uk3z Год назад

Спасибо за видео! Ёмко и по делу, без воды 👍

@Lok1goD Год назад

Круто! Огромное тебе спасибо, всё ясно-понятно, пол дня мучался с видео пока не нашел твоё) Спасибо!

@raphailras5254 4 года назад

Боже ну сколько нужно было прошерстить инет прежде чем найти это видео... Очень ясно и доступно. Спасибо.

@ivanhi4399 5 лет назад

Ну ты...Профессионал.Продолжай в том-же духе!Удачи!

@ariezohar725 3 года назад

Супер! Просто и доходчиво. Красавчег!

@RosarioPorello 5 лет назад

Спасибо тебе , наш учитель ;)

@shmeklz 5 лет назад

Все таки понравилось) лайк

@MrBookimen 3 года назад

Лайк и подписка! Решил сверстать шапку сайта, чтобы добавить в неё видео через HTML 5 и CSS. Не знал как это можно было реализовать. Теперь знаю.

@TamaraNikolaevna 3 года назад

Спасибо за полезную информацию

@XIeepy1 3 месяца назад

Спасибо большье. Ты отлично объясняешь.

@yankafunka1344 3 года назад

Спасибо большое! Все получилось!

@user-xk6yv4qu8i 5 лет назад

как всегда на высоте.

@svitlanaeffectus2310 Год назад

Спасибо за урок! Получилось!

@user-ur7vc7er3b 3 года назад

спасибо! отличный контент)

@vladislav5549 2 года назад

Супер, большое спасибо

@vllcentral9110 4 года назад

Спасибо ! Очень помог:)))

@gevorgmkhitaryan1996 2 года назад

Cпасибо огромное!

@user-pr7pw6sp3u Год назад

спасибо вам :) лучший в своем деле!

@shah7038 11 месяцев назад

Грамотно и просто !!! Спасибо за подсказку.

@onebytesiteit30-75 3 года назад

Мужик, просто жму руку!

@wockywocky3109 3 года назад

Спасибо большое, очень помог

@user-hk6vj4uz4n 4 года назад

Я обожаю твои видео)

@nero-je9ni 5 лет назад

Спасибо, помог

@gvitoss 5 лет назад

Буду благодарен если сделаешь серию уроков по jQuery, хоть какие-то базовые вещи. Чистый JS задолбался учить)

@firudinaskerzade9335 4 года назад

Благодарю и говорю mersi

@HOTBOY9961 5 лет назад

супер! подача, голос все на уровне, однозначно лайк и подписка, только не скатись умоляю!!))))

@AnatoliySharov 3 года назад

куда не скатиться?

@BonBiBon Год назад

Класс!

@soonamitv173 Год назад

Спасибо бро ❤❤

@progerlife6690 5 лет назад

Спасибо! Классно!!!!Димон давай сними пару уроков про Gulp? Думаю начинающим будет полезно знать!

@ravenban7972 5 лет назад

Оставляю комментарий для продвижения

@d.s.korochkin9238 5 лет назад

Круто)

@infinitiv6290 2 года назад

спасибо, помогло)

@elitech3339 5 лет назад

спасибо

@turalperfectworld1065 5 лет назад

Спасибо.

@igorgerald8294 5 лет назад

Спасибо :-D

@user-no3rr2wk2g 4 года назад

Прикольно! Не думал, что так можно. Привык как-то JS-овский код воровать для таких целей

@creatingandeditingcae-duce3623 3 года назад

Огромное спасибо!!! Долго искал почему не запускается автоматически видео

@user-mz7pl5mc6q 5 лет назад

Большое спасибо, Дмитрий! Может у вас появится желание и время для плейлиста "Верстка современного интернет-магазина"?) Может даже сделать такой курс платный? Прям от начала и до размещения на хостинге. Со всеми фишками и особенностями.

@user-jj6ok9wy1i 4 года назад

Топчик! Без всяких курсов, записей, вебинаров и прочей шелухи. Так держать. Будут ли уроки по созданию многостраничных сайтов для новичков? Видео не выходило уже месяц, надеюсь автор не забил на канал ибо пока единственный канал, где без пафоса и глупых шуток всё объясняется просто и доступно, а это в 2к19 по ходу редкость!

@BrainsCloud 4 года назад

Павел Рендаренко курсы тоже есть, куда без них. Скоро будет новый контент

@user-jj6ok9wy1i 4 года назад

@@BrainsCloud Они есть, я видел, но Вы не тыкаете ими кажде 3 минуты видео. Всё чётко и по делу, без шуток и нелепого самопиара ИМХО =) За новый видосик спасибо =)

@MysticFly 3 года назад

Лучший! Лайк и пдписка.

@yaqqnxw9056 25 дней назад

Я ЛЮБЛЮ ТЕБЯ

@user-qj7zo9cg4y 4 года назад

Можешь, пожалуйста, порекомендовать литературу или ресурсы, с которых лучше начать в вебе и дальше по нарастающей. Мб есть какие-то мастхев книги ?

@turalperfectworld1065 4 года назад

Димас хватит отдыхать, мы тебя заждались)

@BrainsCloud 4 года назад

Еще чуть-чуть )

@sem4ik255 3 года назад

Все отлично, но один вопрос: нельзя ли просто поставить тег видео, без дополнительных дивов и задать видео: position/top/left/height=100vh/object-fit=cover?

@pav1337 5 лет назад

Сделайте пожалуйста урок по ajax форме обратной связи. Что бы можно было отрпавить форму и вместо формы (на месте формы) появлялось собщение спасибо форма отправлена.

@nikajibladze6508 5 лет назад

Привет, можешь снять урок про видео заставку но чтобы она менялась при наведении мышки на сылки))

@igor9830 5 лет назад

Можно пожалуйста поподробнее с дивами? Я никак не пойму сколько таких оберток нужно делать и как их использовать. Очень хочу в этом разобраться.. Поможешь?

@elizavetapopova6541 4 года назад

Здравствуйте! подскажите пожалуйста, а как сделать footer в данном случае, чтобы он не вылезал за пределы видео?

@kas_per5649 4 года назад

Подскажите а как прописать со звуком что бы звук был

@AndreyOdessa999 Год назад

Можно ли на главной странице мобильной версии сайта на весь экран поставить видео? И можно ли сделать, чтобы оно запускалось автоматом, без кнопки плей?

@user-zk2ls7io7q 4 года назад

А что скажете по кросбраузерности даного способа вставки видео? А то меня терзают сомнения, что оно заработает на айфоне 11 автоматически.

@DeDDrundulet 4 года назад

Дмитрий, здравствуй. Может ты подскажешь. Я все абсолютно один в один делаю как у тебя на видео, но добавляю свое видео. Но почему то при отображении в браузере оно начинает дергаться. В чем может быть причина?

@Dmitriy_Sentinel 4 года назад

Мне интересно насколько целесообразно использовать видео на фоне, тем более такого большого разрешения.

@sultanalibekov9767 5 лет назад

9:41 а не легче сразу align-item: center написать чем flex-direction и justify-content? или что то не так будет работать? объясните кто шарит

@youtuberelaxvideo 5 лет назад

ПОЛЕЗНОЕ ВИДЕО ЗАЛЕТАЙ

@bintmumin311 2 года назад

Здравствуйте! Скажите пожалуйста, этот метод для тильды подойдёт? Через html вставить

@user-io1ef2kk8q 5 лет назад

Такой вопрос, работает ли этот видеофон на IOS? С их запретом на автопроигрывание видео.

@user-cr9re2yj6h 3 года назад

А как сделать ротацию фона видео?

@daniilkanev7125 5 лет назад

Привет, Дима, можешь подсказать, нужно ли образование программиста, что бы в дальнейшем работать веб-разработчиком?

@BrainsCloud 5 лет назад

Привет, у меня его нет

@daniilkanev7125 5 лет назад

Понял, спасибо)@@BrainsCloud

@SP-he9lj 3 года назад

Выпустить бы ещё теперь туториал "Аудио-фон на сайте используя HTML CSS"

@user-yx8lq4vn9x 5 лет назад

Какой у тебя монитор подключён к маку? ответь плз)

@BrainsCloud 5 лет назад

обычный full hd монитор dell 24 дюйма через hdmi

@d1f1coolr23 4 года назад

А как поверх наложить фото?

@mushnikov35 5 лет назад

display: flex; для родителя , margin: auto; для дочернего и все будет по центру )

@Winnni951 3 года назад

Подскажите, пожалуйста, а как сделать так, чтоб вместо надписи была ссылка, а то она у меня не работает (

@user-tg8cj6bg2n 3 года назад

А, зачем виде без звука? Вы показали как вставить видео для глухих (. Что нужно добавить, чтоб звук был?

@tesfg870 7 дней назад

при функции overflow: hidden; пропадает само видео. не знаю что делать

@annasahradyan9849 4 года назад

Здравствуйте спасибо большое за видео отличная работа,не скажите почему padding-bottom 56.25% ?

@BrainsCloud 4 года назад

Для соотношения сторон 16:9, получается что высота должна быть 56.25% от ширины блока, a padding-bottom в % считается от ширины элемента.

@annasahradyan9849 4 года назад

BrainsCloud спасибо большое за ответ

@kirillsundaen8810 3 года назад

Привет, а как сделать его со звуком?

@fivex7507 Год назад

наверное вы не ответите но всё же спрошу, почему у меня не на весь экран видео а в плеере появляется?

@Ddddddddyu 5 лет назад

Как сделать высоту видео на всю высоту экрана, но при этом чтобы не было вертикального скролла из-за видео

@mushnikov35 5 лет назад

height: 100vh )

@user-sw7oq1nk3u 5 лет назад

Продвигайся

@Toszsa 9 месяцев назад

У меня возникла проблема . У меня дисплей 3840х2400 и когда я ставлю видео-фон (full hd) то он оставляет белые полосы и не ставится на весь экран . Я пробовал менять дисплей в настройках , но если я поставлю 1920х1080 то у меня появятся чёрные полосы на экране . Что делать ?

@777.1 2 года назад

а как зделать живое видио не на канал а на главный фон ютуба через кансоль

@funner5916 2 года назад

А как само фоновое видео закрепить? Просто background: fixed не работает с видео

@sashadrive4734 4 года назад

Для вк как фон сделать? ну видео фон

@user-hc3ky5re8j 3 года назад

А как видео зделать со звуком?

@tapo4ek777 4 года назад

Всё получилось,только .intro для меня оказалось лишним. Видео было маленьким и просто не расстягивалось. Знатоки может скажут в чём причина. :)

@stoic.meditations 21 день назад

У меня не работает если окрывать Safari на IOS Скажите как можно сделать что б и на айфонах работало

@bogdanmusicmix34 Год назад

Раскажи как вставить видео

@user-yh8yu1xd8u Год назад

что делать если текст вылез из фона

@andriihorkusha1230 3 года назад

Через Gulp видео вообще не отображаеться

@Hello_world_2020A 2 года назад

Тег video НЕ РАБОТАЕТ В НОВЫХ ВЕРСИЯХ 99 /100 (до 98 работает только) Они убрали тег video Что мне делать ???

@mikita_bro 3 года назад

а как сделать чтобы видео урезалось не снизу, а сверху?

@ktytar 3 года назад

Спозиционировать видео как bottom: 0 , left: 0;

@roman3403 3 года назад

А как зделать фон неподвижним? постараюсь обяснить: Нужно чтоби фон не проворачивался с текстом. Текст проварачивается а фон закреплен.

@padre4080 2 года назад

Нашел решение?

@roman3403 2 года назад

@@padre4080 да

@roman3403 2 года назад

@@padre4080 background: fixed;

@Dicerec56 2 года назад

не работает( не пойму. почему

@Oksana_Bon 4 года назад

а как сделать чтобы растягивалось на всю высоту при сжатии?

@Oreo_Raccoon 4 года назад

Здравствуйте такая же проблема как у вас, получилось найти решение?

@DeIgado95 4 года назад

@@Oreo_Raccoon нужно добавить для .video__media "object-fit:cover" и дальше поиграться со значениями высоты и ширины элементов

@Oreo_Raccoon 4 года назад

@@DeIgado95 спасибо за совет, на будущее учту, но я уже просто по другому видео уроку сделал и все норм работает))

@DeIgado95 4 года назад

@@Oreo_Raccoon если вкратце - каким методом сделали?

@Oreo_Raccoon 4 года назад

@@DeIgado95 Кстати тем же что вы предложили: object-fit:cover

@user-sw7oq1nk3u 5 лет назад

Народ, нужна помощь. Есть задача: оптимизировать сайт таким образом, чтобы он при запросе был на 3м месте в поиске. Если кто-то знает как работает поиск в гугле и как можно на него повлиять буду очень признателен.

@nikitaermolenko7813 Год назад

Чет скролл не пропадает:( Хоть с .intro, хоть без intro

@Hello_world_2020A 2 года назад

ВАШ способ не работает на версии (на версии 98 работает ) 99 / 100 УЖЕ НА РАБОТАЕТ ПОМОГИТЕ гугл все поломал

@insel260 5 лет назад

Зашел на этот ковер.со.... 200 баксов за видео в 10 секунд, ты издеваешься? Ладно бы там было что то уникальное, но там же просто хлам, которому красная цена 1 цент за целый пак всего раздела!

@asgard1428 Год назад

Дмитрий добрый день. Можете подсказать почему у меня в место видео появляется надпись на нем «видео в поддерживаемом формате и MIME-типа не найдено»? Форматы пробовал разные и браузеры, не помогло.