Как вставить двадцать видео с Ютуба и не скачать слона 

00:22 Вставка по старинке 03:25 Картинка со ссылкой 08:40 Кнопка с фокусом 16:35 Скрипт в работе 21:57 Результат

Все тааак детально рассказано, что не понять не возможно. Это настоящий педагогический талант. Спасибо огромное!

Вадим Макеев пишущий outline:none. Теперь я видел всё :) Простите, не удержался ;) Если серьезно, то большое спасибо, очень подробно и увлекательно!

Гениально, взял на вооружение. Это не только сокращает расход трафика но и количество запросов к серверам Ютуба. А запросов там идёт море, так что эта идея просто божественная!

Ты объясняешь, как бог. Обычно видео длиннее 15 минут вызывают у меня стресс, но в случае с твоими видео и 30 минут проходят незаметно, главное - все понятно. Не знаю в чем именно дело, но это круто

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

Спасибо, Вадим. Очень познавательно. И что самое главное - оно пригодится в работе. За это я и люблю ваши выступления и видео. За практичность. :)

Очень крутые, понятные, полезные и интересные видео, Вадим! Спасибо большое!

Спасибо за урок. Очень вдумчиво, доходчиво, без лишней воды. Спасибо большое!

Спасибо за видео. Соглашусь, такие преподаватели на вес золота! Смотришь и реализуешь данные решения с большим интересом.

Спасибо за видео! Очень ждала этот выпуск!)

Вадим, спасибо! Предыдущие видео тоже хорошие, но это прямо отличное.

Отличный выпуск! Всегда была интересна оптимизация нескольких видео на одной странице. Ждем следующий выпуск.

Очень крутой материал. Спасибо! Обожаю, когда люди делают что-то полезное)

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

Спасибо. Радует, что есть люди, которые думают об оптимизации)

Вадим очень крутые уроки и подача материала! Удачи вам)

Вадим, спасибо! Понадобилось вставивить несколько видео на странице, и это видео идеально подошло!

Спасибо большое! Затронуло все интересующие вопросы по вставке видео

Вадим, очень классное решение! Огромное спасибо за клевый разбор и пояснения!

Если вдруг кому-то будет полезно - надо немного подшаманить regexp, потому что сейчас немного другие ссылки на получение картинки. А так всё работает). Спасибо ещё раз).

Это лучшее объяснение по данной теме и з всех, что я видел! Спасибо)

Просто супер. Просто, доходчиво, с тайм кодами. Супер

Потрясающий урок, классное решение 👍👍 Спасибо!

Супер решение! Реально круто работает! Хочу еще таких подобных фишек чтобы рассказали. Обязательно использую в проекте.

Очень крутая оптимизация! Спасибо, было интересно посмотреть. Ничего сложного, но какой эффект!

Спасибо, Вадим. Мега полезное видео.

Вадим, спасибо! Вы - золото!

Спасибо! Невероятно полезный подкаст, теперь при вставке видео RU-vid больше не будет никаких проблем

Это круто. Спасибо, что делитесь опытом!

Успешно воспользовался вашей разработкой, спасибо вам!)

Спасибо за видео! Смотреть было очень интересно. На самом деле очень мало кто на RU-vid в таком качестве преподносит контент.

Жаль что зачастую в "продакшн" мы используем уже готовые плагины, в которых нет такой заботы о пользователе. Но зато быстро, точно кроссбраузерно и как бы снимаем с себя ответственность. Мол ну это ж уже плагин, готовое решение. Надо будет все таки перебороть лень и использовать подобные подходы. Как минимум свой скилл точно улучшит. Спасибо за видео. Формат суперский, ничего лишнего. И очень нравится как вы радеете за каждый килобайт. Этого в нынешнем вебе ой как не хватает

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

Спасибо! Я делал примерно так же, но у тебя в плане семантики разметки всё идеально)) А еще можно вместо написания своего скрипта по замене содержимого в блоке взять плагин для генерации модальных окон и использовать его для отрисовки видео.

Вадим, ты кладезь. Спасибо тебе огромное.

Спасибо большое! Уже применил в проекте, завтра покажу тимлиду)

Вадим спасибо! Очень полезное видео!

Крутое видео! Спасибо за твой труд!

Спасибо за видео! Вадим, могли бы вы сделать видео на тему: чек-лист вёрстки? Мне кажется, было бы интересно.

Супер! спасибо огромное! пойду исправлять :)

От души спасибо! Мне как раз актуально).

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

Крутая футболка P.S Видео - это просто эстетический оргазм. Все сверстанно идеально включая html, css и сприпты. Я когда-то тоже делал что-то подобное, но, конечно, более костыльными способами. Спасибо, Вадим, за такой крутой разбор

Спасибо за видео. Было полезно и познавательно.

Классное видео и очень полезное👍

Охренительно просто! Слов нет!

Спасибо. Как раз была проблема с оптимизацией -a. А тут все четко объяснено)

10 Кебаб-меню из 10))) Спасибо, Вадим! Отличное видео)

Спасибо..... такие тонкости..... благодарно пожимаю руку

Спасибо за видео! Одно небольшое замечание по JS: Перед удалением атрибута href можно забрать с него ссылку на видео, тогда не придется парсить url с картинки :)

Вадим, спасибо большое за видео. Очень доступно, очень наглядно. Единственное у себя я поменял парсинг id не с картинки а с ссылки. Это позволяет убрать лишнее объявление переменной (картинки), а также можно показывать сторонние картинки (не с ютуба).

Блин, класс! очень прикольно. спасибо)

Классно вышло!

Отлично, спасибо за хорошую реализацию. У меня был работе сайт, в котором были вставлены через слайдер более 20 видео с youtube. Нагрузка на средненький CPU была более 20% после полной загрузки страницы, при этом даже ни одно видео не было запущено.

Пока смотрел вспомнил про замечательный аттрибут target у ссылки. Просто задаешь у name и используешь это имя как target. Из минусов - элементы все еще нужно удалять с помощью js (даже новомодный :has не помог сделать это через css), дублирование ссылок в href и srcset, нужны уникальные имена для . Из плюсов - не нужно писать много js кода и каждый раз переинициализировать новые видео на странице. Еще можно настроить каждый отдельно, так как он находится в верстке

Чумачечий js-хак =) спасибо, Вадим!

Спасибо тебе огромное, добрый человек. Поднял оценку на гугле с 39 до 80 на мобильном (у клиента были все отзывы в слайдере вставлены через )

Очень понравилось!

Отличное видео, спасибо!

Огонь! спасибо!

Ничего нового, но объясняете доступно. Т.ч. лайк, товарищи! Ps.- и даже подпишусь, пожалуй

Вадим, низкий поклон вам! Вроде думаешь, что знаешь многие тонкости, но после вашего урока и вообще ваших видео на канале понимаешь истину - вот он новый уровень. Спасибо вам за труды! У меня вопрос по данному "лайфхаку" - всё сделал как вы описали. Работает! Но вот в мобильной версии на iphone 5 и 7 проверял в Safari и Chrome .... значок-кнопка play почему то отображается на половину. И если нажать на неё то видео подгрузиться и отобразиться, но проигрываться автоматически не станет и поэтому нужно нажать ещё раз на кнопку, что бы видео начало проигрываться. Скажите, это только у меня так или другие тоже сталкивались с этим?

Очень полезно, спасибо!

Ахрененно!

Красавчик, дал то что искал

Вадим, отлично объясняешь

Вадим, привет. Видео как всегда на высоте, спасибо за полезную инфу. Но ещё один вопрос не даёт спать по ночам. Вопрос таких псевдоэлементов :before / :after. Вставлять иконки и нехитрый доп контент - с этим все ясно. А как ещё можно использовать эти свойства? Есть ли какие то гуру-секреты?

Буквально пару дней назад грузил на лендос через около 10 видео. От ютуб в ответ прилетало куча "мусора" и при включенном adblock console просто пестрил красным цветом. Спасибо за действительно полезный контент

То что надо, спасибо!

Просто супер!

Насколько же офигенная футболка...

Спасибо Вадим!

Спасибо, очень интересно

Вадим, здравствуй) не по теме видео, конечно, но видел тебя на видео про "Чистый CSS для грязных трюков". и там Вы говорили о том, что мол нужно находить середину между чистый CSS и JS. Так как писать на чистом JS, то что легко сделать на CSS неправильно. И наоборот. А можешь объяснить так, или на видео с примерами, почему именно. То есть если JS использовать там где можно в CSS просто прописать hover - я понимаю, больше строк, загруженость и т д. То какой пример наоборот? Нежели CSS при решении одной и той же задачи в сравнении с JS, может грузить систему больше чем ниже упомянутый? (я начинающий, большие проекты еще не писал, потому не кидайтесь камнями ребят, если вопрос груп) Спасибо"!)

спасибо, что выложили код)

Спасибо за видео! Вадим, а зачем отдельными свойствами задавать fill и fill-opacity? разве нельзя fill задать в rgba(33, 33, 33, .8)?

Как всегда зачёт

лучший выпуск

ай хитрюга !? давайте еще с инстограммом что нибудь придумаем

Спасибо за видео очень полезный трюк с .

This lesson a very useful!

+1 в копилку знаний, Вадим, спасибо за труд. А подскажите способ хороший, когда видео с ютуба находится в попапе. И например, этот попап каким то из способов закрывается, но видео продолжает играть. Как быть ? Я это реализовал так: при клике на кнопку play запускалась функция которая генерирует innerHtml с фреймом(чтобы видео не прогружалось при открытии страницы дабы не кушать трафик, а при любом способе закрытия попапа я в этот блок вписывал innerHtml = "" ( то есть пустую строку). Таким образом видео прекращало воспроизведение, потому что нечему воспроизводиться. Надеюсь понятно объяснил суть.

Спасибо за видео, все видео супер) Хотел спросить, какой "tool" используете в качестве локального сервера с "live reload" ?

Гений. Спасибо!

Спасибо за видео!

Мне как человеку далекому от js объяснения показались очень доступными, спасибо. Как-то делал что-то похоже, т.к. загрузка сайта висела из-за подгрузки youtube видео, нашел похожий скрипт, который загружал картинку, а после клика - уже грузил видео.

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

кнопка имеет по дефолту type=submit, в твоем примере сабмитить нечего за видео спасибо, приятно смотреть. :)

просто супер)

Вадим, спасибо!

Аналогично и с встраиваемыми картами полезно делать

Полезное и очень информативное видео! Только Вадим, (1) ты же сам в прошлом видео говорил, что тег предназначен для форм и скринридер понимает это как элемент формы, когда на странице формы-то и нет. А тут используется как просто контейнер для иконки Play и даже событие клика на него никакое не вешается. (2) смысл убирать href с ссылки? Не лучше ли сделать event.preventDefault()?

Отличное видео

Спасибо, познавательно. Вадим, а почему табы для отступов?

Спасибо за вашу работу! Как мне кажется, нужно через апи подтягивать стили для видео(если это возможно). Ведь если будет редизайн ютуба все стили устареют.

Ох, мне бы это видео на прошлой неделе, уже бы натренировался вдоволь)

Вадим, прошу прощения, но у вас с опечаткой тег source написан на минуте ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-4JS70KB9GS0.html Интересно почему это сработало?) Вижу просто дальше на монтаже ошибку исправили, но у меня с опечаткой этот тег в хроме рушит верстку) У вас классно сняты видео, очень крутая идея не показывать постоянно код, а иногда переключать видео на человека) Очень прям зашло, легко смотрится и поддерживает интерес) Надеюсь ваш канал станет популярным и будет развиваться!)

Возможно, кто-то столкнется с такой проблемой: некоторые превью (особенно на старых видео) не имеют версию maxresdefault. У них прописано hqdefault или sqdefault. Превью не грузится. Просто поменять URL в HTML недостаточно - скрипт не срабатывает. Я (сразу скажу, в JS полный 0, чисто методом тыка) в regexp убрал упоминание maxresdefault, получилось: let regexp = /https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)/i; Пока полет нормальный, все грузится как надо, может кому будет полезно. Или более знающие в JS меня поправят:)

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