Урок 20. Видео фон на сайте | Курс Веб разработчик | Академия верстки

Автор Pavel Shevchuk
Урок 20. Видео фон на сайте | Курс Веб разработчик | Академия верстки

Привет.

На связи. Артём Исламов это. Академия верстки вы сейчас находитесь в плейлисте который называется web-разработчик 10 поток — это записи нашего закрытого курса мы их бесплатно на YouTube, но мы не выложили домашнее задание и дипломный проект от этого курса для того чтобы получить полный доступ ко всем домашним дипломом и так далее.

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

Вы можете кинуть туда и перейти по ссылке, а затем вы оплачиваете полный доступ ко всем домашку дипломным проектом указывайте свою почту. И после этого получаете доступ полностью к записям курсы веб разработчик 1000 со всеми модулями со всеми заданиями дополнительными заданиями со всеми видео уроками которые здесь есть как мы обычно прикрепляем к каждому нашему уроку и дополнительные документы дополнительные материалы макеты дополнительные ссылки. Поэтому если вы хотите получить полный доступ ко всем записям и не ждать пока они выйдут на YouTube. Вы можете перейти по ссылке в описании и оплатить. Приятного просмотра этого урока. До скорой встречи. Всем привет. С вами. Артём Исламов мы продолжаем изучать основы веб-разработки сегодня на очереди. Урок про видео фон на сайте мы поговорим про быстрое подключение видеофона на сайте при помощи библиотеки JS jquery поговорим про настройки Wi этого видео фона картинку на замену и так далее. И где искать видео фоны для своего сайта для того чтобы видеофон на сайт мы будем использовать вот такой вот замечательный. Кто такой замечательный плагин jquery. Он написан российским разработчикам его можно легко скачать перейдя по которой будет прикреплена к этому уроку можно скачать архив и собственно подключение этого видеофона в этом уроке. Я не буду долго разглагольствовать. Понятно зачем может быть использован видеофон мне — это делается для того чтобы улучшить визуальное качество сайта улучшить его ну так скажем восприятие пользователям видеофон достаточно эффектно такая штука. И поэтому рассказывать о том, что — это круто и классно. Не буду я просто покажу как — это сделать. И так мы скачали архив здесь в пачке диск находятся сам собственное плагин jquery width minus мы его скопирую им нашу на рабочем столе сон и подключен в его в папку джаз вот таким вот образом. Теперь мы перейдём из этой папке обратно в папку архив который мы скачали и в разделе земли здесь будет находиться видео мы воспользуемся именно этим видео ускорить немножко процесс я скопирую папку. Видео перейду на рабочий стол заново и установлю сюда папку. Видео внимание, что в папке находятся в этой папке находится. Ашан в джипег то есть картинка которая появляется. В случае если видео не загрузилось — это очень важно потому, что некоторые браузеры не умеет воспроизводить — это видео мобильный могут не сметь воспроизвести — это видео и иногда видео не загружается потому, что очень медленное интернет-соединение в этом случае будет выступать картинка в противном же случае будет загруженное видео MP4 случае если браузер не поддерживает MP4 будет погружаться видео LG или webm формат, а для того чтобы конвертировать достаточно просто воспользоваться любым конвертером то есть написать 4 отзывы о или MP4 to webm легко скопируйте сконвертируйте точнее любое видео и сможете — это сделать без проблем сразу скажу, что для работы этого плагина необходимо три этих формата чтобы работал на максимальном количестве браузер с максимальной поддержкой. И всё же собственно всё, что мы здесь будем использовать. Мы уже скопировали в нужную папку теперь откроемся в редакторе и набраться первую структуру. Ну во-первых для того чтобы этот плагин работу нужно подключить шейку и я воспользуюсь твоим с нефритом. Если вы ещё до сих пор не написали. Такой снег это. Рекомендую вам — это сделать — это подключение первые версии. Джейка Нам необходимо подключить. Собственно сам этот скрипт при помощи Source и находим в папке GS наш плагин jquery Min JS набросаем в HTML небольшую структуру Def который будет отвечать за секцию section затем внутри должен быть так называемый Block Block Block возьмём какой-нибудь заголовок iPhone например. Артём Исламов больше такой вопрос. сделаем и сделаем — это таким образом section у нас будет иметь высоту не минимальную высоту ставить ещё мы должны сбросить все настройки для боди сбросим все отступы и для всех элементов зададим box-sizing border-box. Отлично Теперь для секции мы задали фон также по всей секции пускай будет текст выровнен по центру, но нужно обозначить секцию ширина у неё будет 100% мы обозначаем её Display Table отлично предлог у нас будет обёртка наша будет Display table-cell отлично и здесь там vertical-align Middle и текст уезжает прямо в серединку то есть текст нас будет в серединке ещё текст нас будет внутри. Весь белый. КРФ отлично текст белый он потерялся — это логично мы поставим в качестве фон для секций background поставь эту картинку которую нас лежит в папке видео пока просто так поставим её просто чтобы она была новый вид центр и background-size Cover отлично картинка заполняет весь экран нужно оживить этот блок и поэтому для дерева с классом секс поставим атрибут Data виде равно.

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

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