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

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

Всем привет.

Вы на канале боец канал с вами. Дмитриева лайка в этом видео мы поговорим о том как сделать на вашем сайте фон из видео в прошлом видеоролики мы сами разбирались сервис на которых можно скачать бесплатные видео нашего сайта и давайте мы с. Вами рассмотрим пример создание фонового видео на вашем сайте а.

Для этого нам понадобится видео скачать.

Вы можете например на сайте kover.ru именно здесь я скачал для этого урока скачал я вот такое видео. Давайте его покажу так вот такое видео мы с вами будем использовать сейчас в этом уроке в принципе небольшое видео как раз таки мы с ним также здесь есть скриншот 1 из кадров видео данный скриншот на пригодится тоже в работе и для чего вы узнаете чуть позже так нужно в принципе давайте мы с вами начнем. У нас видео есть всё готово к работе также я сделал проект новый здесь просто пока, что скелет документа подключил стиле написал просто стиле для базе угломерные прописал Family. Так теперь давайте мы ставим ставим с вами видео на наш сайт будем с вами использовать Tag Video html5 Tag with для вставки видео на сайт в принципе уже хорошо поддерживается данным так. То есть раньше была проблема с поддержка разных форматов видео сейчас в принципе можно использовать MP4 и во всех. Нормально браузерах даже в том числе и Explorer тоже поддерживает данный формат видео MP4. Поэтому в принципе можем обойтись одним форматом видео MP4 то есть мы в путь к видео. У меня всё лежит в одной папке как бы я здесь не делал подпапок поэтому здесь просто указываем путь название файла видео. MP4. Давайте посмотрим у нас появляется видео. Я она занимает столько пространства сколько ему необходимо то есть нас видео Full HD она занимает 21080. О'кей Давайте мы его запустим при помощи атрибута autoplay. То есть у нас видео будет автоматически проигрываться при загрузке страницы, но если мы сейчас смотрим мы с вами не увидишь, что видео проигрывается потому, что чтобы использовать авто плеер для видео вам нужно ещё также указывать атрибут знают то есть если мы укажем атрибут минут то есть выключим звук в видео если видео звука нету всё равно. Вам нужно указать атрибут минут чтобы видео проигрывалось автоматически на вашем сайте. Теперь давайте посмотрим мы видим у нас видео запустилась отлично также. Давайте мы его зациклен то есть пропишем атрибут луп Dan атрибутом позволят проигрывать видео бесконечную видео заканчивается начинается снова с первого кадра так ну в принципе видео мы ставили давайте мы с вами сделаем вот, что вернём данный так видео в div с классом видео. Каким образом и для видео про пишем тоже класс который назовём видео меди так и теперь для нашего видео мы пропишем некий стиле нам нужно сделать видеоадаптер. Данное видео адаптировалась под ширину экрана то есть мы сейчас видел, что видео ставилась на полную его ширину то есть 1920 на 1080 нам нужно его сделать адаптивную. Как нам — это сделать сколько у нас видео. Фул Хаус 9 соотношение сторон 16 9. Мы можем с вами использовать такую конструкцию пропишем для нашего тега Video position relative не прописан с вами padding-bottom 55.20 5% и для элемента видео. Медиа мы с моим пропишем позишн. Абсолют укажем топ позиции лопнули. Ну и в принципе как бы в принципе всё также можем указать с вами нашего видео 100% на всякий случай. Ну как-то так так и. Давайте ещё указан высоту автоматическое чтобы у нас как бы ширина было 100% блока. Зато у нас была автоматически относительно ширины нашего видео. Давайте посмотрим мы видим теперь нас ведёт активную то есть теперь она адаптируется под размер экрана. И теперь у нас всё красиво смотрится, но здесь есть одно, но если мы закроемся в толстом и увидишь, что у нас есть скролл вниз потому, что у меня размер экрана то есть просмотра область просмотра меньше чем 1080 нам нужно ограничивать тоже высоту нашего экрана просмотра чтобы у нас не было с круглым увидели допустим чуть меньше видела то есть нас оближет мягкая часть снизу видео, но мы не будем видеть прокрутку. А давайте мы с вами сделаем ещё один блок. Которому будет с вами работать блок например. Интер назовём в него видео для интро блоком и пропишем s-women такие стиле мы напишем, что у него максимальная высота должна быть в слове hv102h, что у нас высота этого блока будет равна зоне нашего экрана просмотра пропишем 102h и скроем то, что у нас не влезает в этот экран просмотра Overflow hidden сердце у нас будет выезжать за пределы наших слове h&m режутся. Давайте посмотрим увидим у нас сказал про полно видео всё равно адаптивное и теперь всё красиво смотрится данные немножко обрезать. Зато у нас нету прокрутки и в принципе всё получается довольно красиво то есть вот у нас уже в принципе есть видео на фоне блока интро и мы можем как-то с этим работать можем сделать какую-то маску для нашего блока интро мы пропишем на примерах pseudo Element After и сделаем небольшую маску любого принципе цвета так сделаем. Таким образом у нас будет подвешена. Абсолют опять же и топ-0 aleph-0 z-index 2А для видео мы пропишем назад index1. Чтобы наши видео было под нашей маской и для этой маске на пропишем с вами background-color например какой-нибудь чёрный цвет при помощи RGB чтобы его немножко сделать полупрозрачным будем использовать с вами черный цвет и добавим ему прозрачность немножко например 07. Давайте посмотрим у нас получается так сейчас ничего. Мы не видим поскольку я не задал ему размера. Давайте пропишем размеры 100% высота 100% так я сейчас посмотрим. Теперь у нас есть — это маска также. Давай темы для блока цилиндра добавим повернулся чтобы эта маска позиционировала.

0 комментариев
0

Читайте также