Адаптивное видео и видеоролик в качестве фона. Вставка видео/аудио на сайт. HTML-теги VIDEO и AUDIO.

В этом уроке познакомимся с HTML-тегами VIDEO и AUDIO для вставки видео и аудио на страницу. Научимся верстать адаптивные видео, а также устанавливать видеоролики в качестве фона. Поехали! Итак, когда нам нужно вставить видео на сайт обычно, мы используем код, предоставленный тем или иным видео хостингом. Например с YouTube, и об этом мы тоже поговорим, но что если нам нужно вставить именно свой локальный видеофайл?

00:00 - В уроке
00:15 - HTML-тег VIDEO
13:30 - Адаптивное видео
20:58 - Вставка видео с YouTube
22:47 - Видео в качестве фона
29:48 - HTML-тег AUDIO
31:11 - Заключение

👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!

🤟 Живи, а работай в свободное время! ©

[qwe-rty-]

Женя, тут кстати в хром завезли инструменты для флексов и гридов, теперь их изучение стало прям наглядным и вообще вау. Мог бы ты, если в курсе за эти инструменты, ознакомить нас с ними, думаю, что это будет полезно (поддержите лайком, если рил интересно!)

[deniskotov]

Евгений Батькович, моё вам уважение и низкий поклон)))

[zauron]

Нахожусь на данном моменте в середине твоего курса по верстке сайтов, решил оставить комментарий под новым видео чтобы в будущем заглянуть и вспомнить с чего я начинал.
Сейчас много ребят которые бьют себя в грудь и спешат оставить комментарий такого рода, но потом быстро сдаются. Пусть это будет мне доказательством, что я не один из таких)
У тебя самый качественный материал по программированию, смело можешь звать себя лучшим ютубером в этом направлении.

[konstantino]

Евгений, отдельное спасибо за то, что делая новый выпуск, ты сразу его добавляешь в соответствующий плейлист. Так не рушится порядок обучения и я спокойно прохожу курс, зная что все необходимые видосики впереди и не нужно их сохранять себе в отдельные плей-листы, в которых сам же потом и путаешься)) в обучении очень важна структура и последовательность курса. Ещё раз убеждаюсь что твой канал лучший на YouTube!!!

[Masimkaify]

Жека! Огромное тебе спасибо, ты просто дал мне шанс поспать спокойно) Начал разбираться сам с этим видеофоном и таких кастылей мир еще не видал)) Позиционировал текст, а не видео и жесть как оно при адаптиве ломается(( Ты действительно классно преподносишь информацию, только не сдавайся! Продолжаю впитывать твои знания, спасибо! 💪💪💪

[vadimrobinov]

Начал смотреть видео, и думал нового об этом ничего не узнаю, но к концу видео понимаю, что бог вёрстки здесь и готов удивлять!
Жень, как всегда все на 100%, спасибо!

[dahny]

Женя, спасибо вам за ваш труд! Всё как всегда на высоте! Столько голову ломал, тысячу сайтов облазил, а тут ваше чудесное видео с отличным объяснением! Поставил лайк только зайдя на ролик.

[xscbdcs]

Как всегда испытала восторг от подачи материала! Женя, с каким же уважением вы относитесь к тем, к кому обращаетесь! Не только код оставляете в материалах, но и шпаргалки по по атрибутам. Учусь с ощущением легкости! Но не могу не процитировать одного из ваших почитателей: "DOM требуют наши сердца!" СПАСИБО! Интересных велопутешествий и добра в семью!

[kotiko_oks]

21:11
Если бы ты знал насколько ты попал в точку...
У меня курсовая по вэб программированию и я с каждым твоим видео сделал именно так, ведь у меня в курсовой должно быть обучающее пособие, а на Ютубе нет лучшего учителя чем ты, т я в свою курсовую встроил этот плейлист, каждое видео!

[deniskravchuk]

Спасибо, Женя! Все видео как раз под задачу!))

[ankavery]

Отличное видео, без воды, впрочем как и всегда. Хотелось бы ещё что-то подобное о подключении и настройке гугл/яндекс карт, думаю там есть о чём рассказать.

[gitrxxq]

Дуже допомагають твої відео в моєму розвитку як front-end розробника. Вдячний за якісний та безплатний контент!

[Denypopovich]

Урок прям на ура зайшов. Шикарна подача, дякую, Жека!

[relaxing_sounds_zen_meditation]

Как всегда интересно и доступно. Большое спасибо!

[dmitriyegorov]

Маэстро верстки! ) Отличный урок, Жень! Спасибо! )

[Alexus]

Как всегда "всё по полочкам"! Ясно и понятно! Спасибо!

[potehin]

Как всегда очень доходчиво! Благодарю!

[Arkadiy]

Не смотрел, а посмотрю когда столкнусь с этим вопросом в верстке, так лучше зайдет в голову. Спасибо за контент.

[zmeygorynych]

Вот это оперативность и уровень взаимодействия. Не так давно попросил этот видос и Жека тут же забацал красиво)

[Semen_aqw]

боже мой ... это так великолепно !!!! такие вещи делать я вот знаю достаточно в html и css но понимаю что практика - это практика и то что ды делаешь выглядит очень круто !
ЛАЙК !