Загрузка видео с YouTube по клику на картинку с его заставкой

Это называется lazy load (с англ. отложенная загрузка) iframe. Нам нужно чтобы видео с YouTube загружалось не сразу, а по клику на картинке с его заставкой. Решений этому много, но я приведу самое простое.

Исходный код для вставки видео с YouTube на сайт представляет собой iframe:

<iframe width="560" height="315" src="https://www.youtube.com/embed/jg9MX2w7Ebw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

В него сразу подгружается веб-страница находящаяся по адресу указанному в атрибуте src. Это страница с видеоплеером YouTube. В результате страница нашего сайта грузится дольше.

Чтобы этого избежать, мы подгрузим в iframe нашу веб-страницу, которая будет содержать картинку заставки видео со ссылкой на https://www.youtube.com/embed/jg9MX2w7Ebw:

<iframe width="560" height="315" src="https://site.ru/video.html" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Пример содержания страницы https://site.ru/video.html:

<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}</style><a href='https://www.youtube.com/embed/jg9MX2w7Ebw'><img src='http://localhost/img/youtube.jpg' alt='Я не использую куки'></a>

Код сокращён до минимума, т.к. можно обойтись и без создания отдельной страницы, вставив его в атрибут srcdoc и убрав ненужный атрибут src:

<iframe width="560" height="315" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}</style><a href='https://www.youtube.com/embed/jg9MX2w7Ebw?autoplay=1'><img src='http://localhost/img/youtube.jpg' alt='Я не использую куки'></a>" title="Я не использую куки" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Рабочий пример этого решения вы может посмотреть на сайте https://kadabrus.ru/