Как вставить двадцать видео с Ютуба и не скачать слона
Решение безупречное. Спасибо!
Аналогично, Amodeus. Спецом прокрутил все коменты видео, что бы найти твой комментарий через ctrl+f запросом "без js".
Если нет JS - не понятно, что эта картинка-ссылка - ведёт на ютуб и что она вообще куда-либо ведёт (зачем здесь 15:16 вставили фото Вадима Макеева, который машет рукой? А?))), т.к. нет кнопки Play. Да, без JS ютуб не будет работать, но если JS в браузере есть, но он сломался только на вашем сайте - здесь соломку не постелили )
Думаю, нужно дополнить в закрепленном комментарии про этот момент.
Вопрос, как сделать, что бы кнопка была без JS? Думаю, не обязательно, что бы это была кнопка (элемент button), но нужно визуально показать кнопку Play. Первое, что приходит в голову сделать backround с картинкой кнопки в элементе after у ссылки a.video__link. А ещё лучше сделать визуально кнопку Ютуба на чистом CSS из after и before.
Как думаешь, Вадим? Это достаточно безопасно (с точки зрения кроссбраузерности)? Или у тебя есть более лаконичное решение?
**
В догоночку: есть ещё минус текущей реализации. Как минимум в Safari на iOS при первом клике: просто загружается ютубовский iframe, но видео не начинает воспроизводится - приходится второй раз нажимать, что бы запустить воспроизведение. 100% это как то решается. (как найду - отпишусь) Это решено в fancybox 4 (fancyapps) там при клике по первью одновременно открывается fancybox с iframe Ютуба и сразу начинается воспроизведение.
Пример: https://www.kitsystem.ru/konditsionery/nastennye/royal-clima/seriya-gloria-upgrade-2022/rc-gl22hn
Кнопка Видео (под заголовком) — открывает Fancybox.
В описание — типо обычное видео с Ютуба.
**
UP:
Если кому то ещё интересно.
Я упоролся и выяснил как запустить видео без двух тапов на мобильном Safari и Chrome.
Есть 3 пути: (они разбросаны друг от друга по всему Интернету, на очень большом расстоянии).
1. playerIframe.addEventListener("load", function () { .. }); // Просто, но это имеет большую задержку перед воспроизведением (около 500-700 мс, серьёзно, ощутимо неприятная задержка)
2. Использование официального tag.src = 'https://www.youtube.com/iframe_api'; // Уже лучше, но нужно тянуть 157 кб JS этого самого API
3. Очень хардкорный трюк: общение с ютубом по message, по средствам poller'а (вы с промежутком 250 мс спрашиваете ютуб - ты готов? - он говорит: нет, нет, нет, да - и тут вы просите сразу запустить видео)
window.addEventListener("message", function (e) { .. }
iframe.contentWindow.postMessage('{"event": "command", "func": "playVideo", "args": ""}', "*")
Это если очень коротко. Можно написать подробную статью, может даже на хабре..
Но потом, не сейчас. Время 2:34.
А и главное, в Safari всё же автоплэй работает через раз. Кажется это связанно с их политикой. Наверное лучше будет детектить iOS и сразу грузить iFrame - устройства на iOS - дорогие, богатые - пущай грузят - это будет лучше чем портить пользовтаельский опыт с двойным тапом на Плэй.
Конец.
**
UP 2:
Демо: https://andres-website.github.io/youtube_lazy_load/
Код: https://github.com/andres-website/youtube_lazy_load
