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

[@pepelsbey]

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

[@konsvel]

Вадим, попробуйте оформлять JavaScript код в виде es6 класса. Мне кажется так удобней, и получается структурированный и чистый код. Общий код можно вынести в родительский класс (и для инициализации). Например github.com/zoxon/gulp-front/blob/master/source/modules/alert/alert.js

[@pepelsbey]

Я вам страшную тайну открою: я не JS-программист. И думаю многие зрители этого канала - тоже. У меня есть ремарка ближе к концу, что я код довольно простой и можно было сложнее. Но зачем? Это демонстрация принципа, а не npm install lazy-load. Думаю, я продолжу и дальше писать JS попроще. Возможно, стоит это проговаривать ещё более явно.

[@Renton1428]

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

[@artemtarasov6974]

Не поверил, пока сам в видео не увидел. Шок контент

[@M-Daeva]

А что в этом необычного?

[@sashabeep]

Это было неожиданно

[@MyJIbTukk]

Ну и что, о чем собственно разговор )? Вадим Макеев на лекциях о доступности открыто говорит: "Если вы убираете outline, позаботьтесь, что бы у интерактивного элемента обязательно было некое состояние фокуса". В данном видео все логично, элемент при наведении, или выделении себя в фокус, явно показывает активное состояние. =)

[@АрнольдШизлонгер]

Шок контент ;D

[@frutezzzzz]

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

[@OlgaGolovko-nd9sm]

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

[@ИловМакс]

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

[@iavetoshkin]

«Давайте вкрячим элемент » - это прекрасно.

[@ukolove]

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

[@my_coolheart]

Невероятный ход мыслей автора, я в восторге, спасибо, почерпну сколько смогу, стану лучше)

[@valeravilks2150]

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

[@dmitriy72600]

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

[@КостянЕрмаков-е9ю]

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

[@dmitriybraginets6750]

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

[@zatochiSiberian]

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

[@sanchezz1135]

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

[@pepelsbey]

Верно подмечено, поправлю в демке!

[@СергейАртёмов-р5у]

@@pepelsbey а ещё скрывать её лучше атрибутом hidden, а не в стилях: когда будет то, благодаря чему она будет рабочей кнопкой, а не пустой клацалкой, тогда это что-то её и "покажет".

[@pepelsbey]

Я состояние enabled использую не только для кнопки, поэтому хотелось одним действием менять всё сразу. А hidden это тот же display: none. Но может я чего-то не понимаю?

[@СергейАртёмов-р5у]

​@@pepelsbey Это примерно та же история, что и про размеры для заинлайненных svg-иконок. Если не приехало и/или не сработало то, для чего эта кнопка нужна (стили или скрипты, но чаще скрипты), то на странице будет болтаться странная кнопка, не делающая ничего. А в случае с атрибутом hidden соблюдается PE: приехало и сработало - пусть оно и активирует, навешивает нужный display.

[@rselivanov]

@@pepelsbey hidden у кнопки выглядит логичнее и к тому же не понятно зачем нужен cursor: pointer в .video--enabled, т.к. video__link это ссылка которая полностью заполняет video, а у ссылок по умолчанию cursor: pointer

[@andriikonstantynov4508]

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

[@kseveru]

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

[@konstantinchernyaev3011]

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

[@dayfuaim]

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

[@ДенисСоколинский]

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

[@ЛенаКиселева-в5в]

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

[@ArtemBro-y5s]

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

[@ГлебЧ-б8п]

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

[@e.chefranov]

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

[@ukolove]

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

[@milyovatatiana4346]

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

[@useruo5uo1sn6z]

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

[@doctordobro8694]

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

[@erega74]

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

[@MrGvd-i9k]

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

[@DlSPLACER]

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

[@noname-nonaymich]

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

[@stephaninabox]

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

[@ЕвгенийГурьев-н5ц]

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

[@ivanpsarew]

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

[@gorodiskiy4]

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

[@dmitriysmirnov457]

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

[@АлексейДавыдов-с2ч]

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

[@alexruban9615]

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

[@sergeykonovalenko8482]

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

[@Norealko]

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

[@Jay-pp4pk]

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

[@Andrey_4dev]

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

[@loginov2030]

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

[@tubtivi]

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

[@alekseiiudin2874]

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

[@alekseiiudin2874]

по поводу кнопки обрезанной я так и не решил проблему. Про автоплей вроде как предположение того, что это ограничения в браузерах смартфона (безопасность + экономия времени ЦП + экономия трафика). Хочу заметить, что лайфхак не подойдёт для тех, кто использует турбо-страницы. JS для них запрещены. У меня турбо-страницы это 25% трафика. Учтите этот момент, если ваши турбо-страницы генерируются динамически плагином

[@ДанилЧернов-р5т]

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

[@СемёнСемёнычГорбунков-ц7ы]

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

[@annagri1798]

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

[@hopmnc]

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

[@Mamikonars]

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

[@ВадимКороль-ч8й]

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

[@andreysokolov2335]

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

[@katerinaonair3534]

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

[@ВладимирИгнашин-ф2м]

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

[@asteroid_serezha]

Спасибо, дружище. Помог.

[@ОтецФёдоръ]

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

[@kgl8632]

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

[@benhummer185]

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

[@agfasgasasgasgas]

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

[@siarheilabetsik5658]

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

[@antonleonov]

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

[@m_mariya_mari]

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

[@pepelsbey]

В качестве превьюшки можно использовать Google Maps Static API, который просто отдаёт картинку. А уже при клике на эту картинку или лучше по кнопке поверх неё, можно инициализировать карту developers.google.com/maps/documentation/maps-static/overview

[@m_mariya_mari]

@@pepelsbey Спасибо!

[@m_mariya_mari]

и еще вопрос в студию - есть ли возможность убрать элементы Ютуба с видео, по KZbin Player API Reference for EmbedsI не все убирается.

[@pepelsbey]

Тут не уверен, с этим API не работал, но обычно - нет. Если нужно убрать контролы или брендинг, тут только Vimeo.

[@MrSergey11]

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

[@bekliev]

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

[@pepelsbey]

У скринридеров всё нормально кнопками, у которых type="button", я забыл его на видео, но уже поставил в демке. Они не кажутся элементами форм. Событие click на кнопку повешено через всплытие: если на ней сфокусироваться и нажать пробел, то видео запустится. Я решил два раза не вешать, чтобы упросить код - и так работает.

[@pepelsbey]

Если убрать href со ссылки, то она перестаёт быть ссылкой как для клика, так и для скринридеров. Превент отменяет клик, но оставляет её в дереве доступности и в порядке фокуса по странице. Это в самом деле самый простой способ убрать ссылку, не заморачиваясь с DOM.

[@bohdandvorianov]

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

[@НариманОсманов-д3у]

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

[@doublebubble9823]

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

[@vitalb7907]

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

[@polosatyj777]

Годнота. Можно ещё прикрутить синглтон паттерн, что бы одновременно не воспроизводить более одного видео на странице.

[@pepelsbey]

А форкните и предложите реализацию прямо здесь может?

[@HectorSeries]

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

[@3dzbot]

Низкий поклон. В который раз перехожу по ссылке что б код скопировать!!!

[@danyawyse1933]

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

[@vyacheslavbasenko2730]

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

[@pepelsbey]

Задача была «как не скачать слона», а не «как имитировать плеер». Думаю, если нужно, вы сами с этим справитесь и точно дешевле, чем по цене +500 КБ за каждый плеер.

[@vyacheslavbasenko2730]

@@pepelsbey Думаю задача всё таки должна быть «как не скачать слона и получить тот же результат», вместо «как не скачать слона обрезав добрую часть функциональности». И это ещё вопрос, можно ли реализовать тот же функционал не скачав эти 500кб. Бесспорно, в некоторых случаях достаточно одного "play", но в остальном не хочется лишать пользователя остальных возможностей.

[@teinett]

Параметр помог решить задачу с over-трафиком и счетчиками? Или все еще нужно применять твой хак?

[@pepelsbey]

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

[@grxvethreat903]

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

[@odinokun]

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

[@kirillkononov5094]

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

[@sergey5565]

Спасибо, классное полезное видео. Но есть небольшое предостережение по скрипту. В функции setupVideo можно нарваться на Memory Leak, так как ссылка на link и button будет жить в замыкании даже после их удаления, пока будет жить объект video и его обработчик. Я бы советовал получать элементы link и button внутри обработчика.

[@pepelsbey]

А сделайте ремикс на Глитче и дайте ссылку, я для этого и пощу там :)

[@mumusus]

А можно поподробней про мемори лик со ссылками линк и баттон? А вы сделали уже ремикс исправленный? )

[@pavelarseyev452]

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

[@pepelsbey]

Я скопировал код прямо с Ютуба - там было так, плюс формат записи RGBA сложнее читается, на мой взгляд, чем два отдельных свойства.

[@Teacification]

Д1. У всех изображений в теге прописан размер.

[@pepelsbey]

Вы перепутали канал, вам сюда kzbin.info

[@Teacification]

Не первый раз убеждаюсь. Все, чему учат в Академии, пригодно только в самой Академии :(

[@pepelsbey]

Нет, вы неправы. Просто это не Академия, это мой блог. Критерии - это тренировочные колёса, без которых новички упадут, расшибут лоб и потеряют интерес к профессии. Мы просим принять критерии как данность, даже если вы не согласны или не понимаете. Потом, когда выйдете в жизнь и наберётесь опыта - снимайте свои колёса.

[@Teacification]

На этом и остановимся :)

[@dahamyr]

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

[@vseravnovoobwe]

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

[@alexnoodles8290]

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

[@strusovsky]

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

[@pepelsbey]

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

[@dreadwood]

Вернулся к этому видео через 4 года, когда youtube уже не работает в России, а плеер vk настолько тяжелый, что даже один сильно блокирует рендеринг страницы. Спасибо за старые актуальные видео.

[@zapiski_verstalshika]

как все просто и во время... спасибо!!! у меня как раз задача - сделать карту со звездами, Kликая по звезде должно появиться в popup с видео из youtube, осталось только сообразить как вернуть ссылку вместо

[@5_time]

Ссылку можно вернуть таким же образом, как и вставляли

[@keyh0le]

Вадим, корректно ли интерактивный элемент вкладывать внутрь интерактивного элемента: сначала a, а потом внутри кликабельного div.video? Будут ли плодиться при повторных нажатиях на div.video?

[@pepelsbey]

Я не просто так заменяю картинку на фрейм с помощью скрипта. Вкладывать фрейм прямо в ссылку, как вы правильно заподозрили, нельзя.

[@dmawzx]

Ахрененно!

[@ДмитрийМ-ь5с]

Идея отличная, но в js я бы поменял: скорее нужен не let, а const; циклы for-of; парсить url лучше с помощью класса URL.

[@haqverdibehbudov473]

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

[@pepelsbey]

Иногда browser-sync, иногда live-server - это всё в консоли, стоят их npm глобально.

[@haqverdibehbudov473]

Vadim Makeev спасибо большое за ответ)

[@ya_oleksandr]

Привет, спасибо, хорошее решение. На iPad/iPhone автоплэй не отрабатывает в , прийдётся кликать два раза. Что посоветуешь?

[@pepelsbey]

К сожалению, не знаю. Здесь уже нужно использовать KZbin API, насколько я понимаю.

[@igk1972]

Вадим, привет! Спасибо за полезные видео. Вопросы по данному видео: 1) иногда в видео (особенно за долгий период времени) отсутствуют некоторые варианты обложек. Пока выход только в использовании mddefault. Твое мнение? 2) в некоторых обложках есть чёрные полосы (верх/низ). Решение с picture тут не подходит. Приходится использовать решение от KZbin - div с background сover. Если ли решение с picture?

[@pepelsbey]

Если коротко: нужно изучить какие размеры точно есть и в каких есть полосы, а в каких нет. Думаю там можно подобрать адекватный вариант. Класть контентную картинку фоном, на мой взгляд, преступление против здравого смысла и доступности.

[@igk1972]

@@pepelsbey преступление, однако внутри KZbin именно так - background. Это конечно не аргумент. Однако когда заказчик имеет несколько десятков видео (разных лет, с разным качеством обложек), то к великому сожалению, вариант с picture не подходит. Но может есть ещё решение, пока не нашёл.

[@igk1972]

Отвечаю сам себе )) Моё решение для проблемы отсутствия некоторых размеров обложек: enchanted-pink.glitch.me + object-fit с cover для img

[@igorkroshkin9354]

К сожалению, при открытии страницы в мобильном телефоне Android и клике по видео - видео открывается на странице youtube... (на компьютере открывается прямо на сайте) Тестировал Вашу страницу "Стало" after JavaScript на телефоне ВКЛЮЧЕН

[@andryi6175]

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

[@РонКасторкин]

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

[@richardwong4613]

Вадим, благодарю за видео! Можно кратко описать принцип хака с паддингом?

[@pepelsbey]

Принцип в том, что вертикальный паддинг в процентах рассчитывается относительно горизонтального. Так уж принято :)

[@richardwong4613]

@@pepelsbey Спасибо!

[@pavelarseyev452]

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

[@БарсуковСергей-ж1к]

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

[@bekliev]

Вадим, прошу тебя затронуть в следующем выпуске тему размытости текста при использовании центрирования transform'ами translate(-50%, -50%). В интернете много статей про это и где-то 4 решения по этой размытости текста (blurry text).

[@bekliev]

Расскажу свою историю. Недавно, недельки 2 назад, пришлось центрировать попап по обеим осям. Воспользовался таким же методом, как и твой метод центрирования кнопки Play ютуба. У меня на ПК все отображалось четко и без размытий. Когда работа ушла на тестирование, то выяснилось, что на разных компьютерах и при разных разрешениях текст в попапе начинал размываться (становился не чётким). Полез в интернет нашел 4 решения, но ни одно из них не дало результата по blurry text.

[@bekliev]

Этот метод центрирования мне очень нравится, но из-за этого blurry text пришлось отказаться от него. Кстати, я смог и у себя воспроизвести эту размытость - достаточно было изменить ширину самого попапа, чтобы размытость появилась. Как я понял, размытость появляется когда ширина контейнера нечётная, например: 501px, 503px, 505px и т.д. В таком случае transform пытается определить 50% из этой величины и выходит не полный пиксель (например: 250.5px)

[@ПавелКарпов-ь4н]

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

[@pepelsbey]

К сожалению, с этим способом пока никак. Даже в решении Пола Айриша есть похожая проблема paulirish.github.io/lite-youtube-embed/

[@ПавелКарпов-ь4н]

@@pepelsbey Благодарю за ответ, Вадим. Ищу решения...

[@IL-rz6el]

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

[@pepelsbey]

Засчитаю за вопрос :) Давно хочу об этом видео записать.

[@pepelsbey]

Это будет мой ответ, не твой, он будет подлиннее.

[@stayacid]

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