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

В этом уроке познакомимся с HTML-тегами VIDEO и AUDIO для вставки видео и аудио на страницу. Научимся верстать адаптивные видео, а также устанавливать видеоролики в качестве фона. Поехали! Итак, когда нам нужно вставить видео на сайт обычно, мы используем код, предоставленный тем или иным видео хостингом. Например с KZbin, и об этом мы тоже поговорим, но что если нам нужно вставить именно свой локальный видеофайл?
👉 Материалы урока: fls.guru/files/tutorials/medi...
👉 Видео/аудио конвертер: convert-video-online.com/ru/
👉 Политика Google: developers.google.com/web/upd...
👉 Уроки по гридам: • CSS Grid Layout. Кросс...
💪 Платный курс по верстке: edu.fls.guru
🔴 Карта канала: miro.com/app/board/o9J_lZB3YKI=/
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
00:00 - В уроке
00:15 - HTML-тег VIDEO
13:30 - Адаптивное видео
20:58 - Вставка видео с KZbin
22:47 - Видео в качестве фона
29:48 - HTML-тег AUDIO
31:11 - Заключение
👉 @IT-ПРИСТРАСТІ, українськомовний канал присвячений інтерв'ю з цікавими IT-спеціалістами - / @itpassions
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@FreelancerLifeStyle]

🤟 РЕПОСТ! 🔴 Карта канала: bit.ly/36r29xV 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@poker6044]

А можно подробнее на эту тему, например про видео с прозрачным фоном, какие нужны фоматы видео и атрибуты, что бы разместить такое видео на сайте?

[@deniskotov]

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

[@FreelancerLifeStyle]

Ахах) Спасибо!

[@qwe-rty-]

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

[@FreelancerLifeStyle]

Обязательно!

[@konstantino7016]

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

[@zauron9213]

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

[@FreelancerLifeStyle]

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

[@MBoyChannel5]

Ждем новостей) Удачи!

[@kagenburgburg4220]

Я тоже недавно начал, надеюсь у нас все получится!

[@zauron9213]

@@MBoyChannel5 Спасибо большое!

[@zauron9213]

Все кто еще на пути обучения, лайкните, посмотрим сколько нас)

[@dahny6544]

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

[@user-ng7ei9hd2f]

Все уроки реально очень крутые. Выглядит все очень красиво и объяснения более чем понятные. В остальном только практика поможет это все усвоить. Спасибо за Ваш труд.

[@dmitrid.317]

Есть у Жеки редкий дар угадывать какой следующий видос будет весьма полезным для нас! Спасибо сен-сей)

[@shukonfadah5725]

все ваши виде это лучшее что можно найти на русскоязычном сегменте! Я поддерживаю вас во всём! желаю мира и спокойствия вашей стране и семье

[@user-xw2on1rw1i]

Как это вовремя! Как раз мне надо вставить видео в начало сайта. Спасибо большое! Тут всё что нужно в полном объёме.

[@selleniya999]

Я тут сообразила: вот эти уроки полезны не только сами по себе. Я быстро стала ориентироваться вообще в программах. Не такая беспомощная теперь. Вот спасибо!

[@user-xs5cb1dc6s]

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

[@FreelancerLifeStyle]

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

[@user-nk7qp2cj3o]

Я всегда хотел уметь вставлять видео в фон! Спасибо вам!!

[@user-hk6yw1ul7k]

Благодарю за такое познавательное видео! Получаю огромное удовольствие от обучения именно по Вашим материалам! Желаю успехов!

[@user-gi3tr6xx4q]

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

[@konstantino7016]

Да это же волшебство какое-то!!! Супер! Отличный урок

[@vadimrobinov6524]

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

[@user-or8my3mj3l]

Странно что на таких видео так мало просмотров. Хочется чтоб автор не переставал этим заниматься

[@FreelancerLifeStyle]

Согласен!

[@artyomnazarov8518]

Просто спасибо тебе, Женя, за твой труд.

[@Masimkaify]

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

[@user-kq5ow1zv3m]

Спасибо большое.Мне очень нравится смотреть ваши видео.Все понятся и много полезных советов!!!

[@topalek]

Женя, спасибо большое тебе за твой труд.

[@sergeycraftsman3637]

Евгений, делаешь большое дело!!! Благодарю, что делишься своими знаниями, оно того стоит!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@Arkadiy7]

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

[@dianadallaitalia]

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

[@zmeygorynych5684]

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

[@kotiko_oks]

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

[@deniskravchuk707]

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

[@Alexus1504]

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

[@FreelancerLifeStyle]

Пожалуйста!

[@potehin44]

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

[@Andrey_Mendel]

Дякую! Дуже якісно та доступно. Як завжди!!

[@user-ls6ss6tl1f]

Незаслуженно мало просмотров для таких полезных роликов. Хочу лишь сказать, что Евгений делает очень важное дело, как творец, за что ему большое спасибо !

[@Denypopovich]

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

[@VeloGitaryst]

Благодарю, как всегда интересно и доступно!

[@THG6196]

Привет с Узбекистана, БОЛЬШОЕ СПОСИБО👍

[@ankavery]

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

[@FreelancerLifeStyle]

Спасибо!

[@user-tg9mc8bf1s]

Очень познавательно и полезно! Спасибо!

[@maxfatyanov7096]

Информативно и полезно, благодарочка за видос

[@dmitriyegorov4764]

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

[@sergeypr5521]

Спасибо! Как всегда ясно и понятно!!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-rd4kg4yg7t]

Ви Бог верстки !!!

[@MilenaAdelin2207]

Женя ДЯКУЮ ТОБІ ЗА ТЕ ЩО ТИ РОБИШ!!!! Мені ця тема зараз дуже актуальна!!!

[@nataliiachaikovska9579]

Классный урок! Очень нужная для меня информация ;) Спасибо. Лайк и вперед смотреть :)

[@iliagolota9653]

Супер! Дякую за нове корисне відео ! 👏👏👏

[@Semen_aqw]

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

[@FreelancerLifeStyle]

Спасибо!

[@user-np9mq5xc7j]

Спасибо! Ждал этот видос! ☺️

[@kostz1212]

Спасибо тебе большое за труд!)

[@FreelancerLifeStyle]

Пожалуйста!

[@ms-33]

Какой хороший человек! Спасибо.

[@FreelancerLifeStyle]

Пожалуйста!

[@TeeBKECH]

Спасибо! Годный контент и интересная подача)

[@no_way_back813]

Опа а вот и новый урок от Жеки! Поехали!)

[@FreelancerLifeStyle]

Вперед!

[@alexanderbashkatov5981]

Спасибо, Евгений! Очень круто

[@user-kg6fz5tz2b]

Спасибо! Как всегда на высоте!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-gw7zj9gh5v]

Жека, как всегда всё КРУТО!!! Всё, я пошёл новый KZbin запилю...)))

[@user-nl9dk4tg8e]

Классный ролик. Легко запоминается.

[@konstantinreut2577]

Thanks a lot, bro! The lesson is perfect!

[@stelsboii]

Загрузил страницу, сразу поставил лайк

[@_CryptoFunUA]

дякую друже, як завжди на висоті !

[@FreelancerLifeStyle]

Будь ласка!

[@elwvin]

Классно Спасибо большое, было очень интересно и познавательно!!)

[@user-md6pz4he5u]

КЛАСС! Как вовремя. Крутое видео

[@detro1821]

на отошел от крутейшогр видоса об дом и тут еще и этот, спасибо, учитель

[@annamets]

Круто! Ждём кастомный плеер!

[@itga1qadam941]

Качество говорит в деле. Спасибо Жека

[@user-so2fp7im9i]

Спасибо Жека. Зашел с другого аккаунта чтобы поставить еще один лайк и комент!!!)))

[@viya98]

Это шедевр, огромное спасибо😊

[@user-gp5mb4po1q]

классно все рассказали!Спасибо! а если след в след делать еще и голову прикладывать то все получается))

[@hmutyikoot4454]

Просто превосходно) Вечером обязательно посмотрю! Лайк!) Может быть будет ещё урок по стилизации плеера?

[@ruslangrebennikov8342]

Как всегда круто! 🤘🏻👍🏽

[@user-oi3xf6cb7e]

Очень хорошее видео. Так держать !

[@user-zi2nq6ic7i]

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

[@whoisleshalight8514]

Круто, спасибо!!! было бы круто еще научиться делать свой кастомный плеер!!))

[@ErnestGaliullin]

Какой такой эдакий мастер поставил дизлайк?? А как всегда с меня лайк, а ты как всегда продолжай в том же духе. Ты каждый день делаешь мир чуточку лучше, а веб-разработку проще.

[@user-rc4yd1kx4t]

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

[@user-is7uj9my4k]

Крутейшее обьяснение!!!

[@user-mh9pf9dm2j]

Блин, я только начал искать! Спасибо!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@stefanskyi_]

👍 Вподобайка та комент 🔥🔥🔥

[@user-pk3eu6su6w]

Все как всегда супер!

[@user-rt4kw1qu5l]

Спасибо! Как всегда помогли!

[@user-re8yd6jn4x]

Буду ждать ролик, как сделать кастомный плеер!

[@evgenika7472]

Спасибо большое!!! Тылучший!!!

[@kotbarsik9613]

Полезно. С кайфом)

[@user-kh3ob7sw9v]

Нет слов, одни емоции

[@FreelancerLifeStyle]

Спасибо!

[@user-sd6hp9xb7i]

Круто! Спасибо!

[@user-lb4xg6jf6j]

сразу лайк, потом просмотр!

[@kirillpopov1445]

Спасибо, очень жду "Как это сделать" про плеер

[@krukru4500]

спасибо,чувак, лайк подписка,однозначно!

[@goodman4493]

Евген, спасибо за очередной видос. Если прочитаешь, то можешь вкратце ответить на такой вопрос. Есть в браузерах такая тема, как Lighthouse. На сколько она объективна, и стоит ли на ее показатели сильно ориентироваться? Классно если выпустишь небольшой видос на такую тему, как оптимизация, где проверять на работоспособность свои макеты и т.д.

[@adeptusCustodius]

Жека, ты крутой!!! Спасибо тебе!!!

[@user-rs2mz2hv1y]

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

[@user-xs5cb1dc6s]

Женя, еще раз спасибо! Если будете еще рассказывать про видео, может вспомните мою просьбу. В макетах часто у видео есть картинка-заставка (про нее вы рассказали), а посередине заставки стоит иконка-плей. Разместить эту иконку проблем нет, но наверное дизайнеры планировали, что при нажатии именно на эту иконку стартует видео. Заранее спасибо! А может это способ дизайнера показать, что на этом месте видео, и не обязательно делать эту иконку... Вот подумала-подумала, и сама себе и отвечаю, что могу эту иконку сделать ссылкой и открывать видео через поп-ап. :-)) Я тут за одним блогером верстаю многостраничный сайт (хотела новые фенечки подсмотреть), так после первой же страницы стала делать сама по Жекиной методе, уж больно мне нравится ваши придумки!

[@user-bj8oe1gt3r]

Очень крутой урок, Жека красавчик что даришь нам эти знания.🎉

[@persephone8538]

Женечка, спасибо тебе большое) ты просто золотце!) было бы здорово, если бы ты в будущем упомянул в каком-нибудь стриме или видео, как настроить видео в gulpfile )) пыталась сама, но как-то пока не выходит ((

[@dimashrakhymzhan5242]

Почему у этого канала всего 100 с лишним тыс подписчиков?! Вот вам бесплатная удочка! Научись пользоваться и лови рыбу! Удачи Вам! Спасибо за канал!

[@FreelancerLifeStyle]

Пожалуйста!

[@Lerogorn]

Спасибо!

[@eduardmychka9644]

Круто!

[@velobarahlo]

благодарю за видео

[@YourVideoEditor]

Thank you! It works

[@hibiride]

Респект!

[@valentynbilan]

Фантастиш! 💪🏻

[@FreelancerLifeStyle]

Спасибо!

[@GaponovaT]

Очень вкусное "мясо" Спасибо!💖

[@nasibanazarowa5675]

Спасибо вам вы Супер классно👍👍👍👍👍