Очень часто ставится задача сделать максимально быстрой загрузку страниц на которой находится крупное количество видео с youtube, например, в качестве отзывов.
Даже одно видео встроенное через iframe в страницу очень сильно замедляет её загрузку и отпугивает Ваших потенциальных клиентов.

[spoiler title='Немного тестов']
Было создано две пустые страницы.
На одной из них был просто вставлен iframe без параметра autoplay, дабы пользователю пришлось нажать на видео для его запуска.
На другой было вставлено это же видео, код с заглушкой был полностью скопирован отсюда, из этой статьи. Так же, для запуска видео пользователю нужно было нажать на видео.

Интернет стабильный и не дерганный. Страницы грузились без кэшей и всего остального.

Страница с чистым iframe грузилась в среднем 0.257 секунды.
Страница с "заглушенным" iframe грузилась в среднем 0.105 секунды.

Это быстрее чистого айфрейма даже более чем в два раза!
А представьте, что будет если таких айфреймов на странице будет десять?
[/spoiler]

Оптимизация выглядит странно, но работает. Необходимо повесить вместо видео заглушку-картинку, при нажатии на которую будет происходить встраивание iframe с параметром autoplay.
Адаптив делать не буду дабы не растягивать статью слишком сильно.

Первым делом нужно получить обложку видео для заглушки.
Берём ссылку для нужного видео и вытаскиваем идентификатор видео, например
https://www.youtube.com/watch?v=ID-VIDEO
Нам нужна только выделенная часть.
Ссылкой на обложку в максимальный размер будет:
https://img.youtube.com/vi/ID-VIDEO/maxresdefault.jpg

Так же нам нужно изображение кнопки плея. Как достать не подскажу, но вы можете воспользоваться этой:

И собираем всё в кучу. Так же создаём функцию которая будет вставлять в наш контейнер ютуб-айфрейм с параметром autoplay.

<style>
.video1 {
    width: 260px;
    height: 150px;
    position: relative;
    border: 1px solid #000;
    background: url(//img.youtube.com/vi/ID-VIDEO/maxresdefault.jpg)  0% 0% / cover;
}
.video1-play {
    background-image: url(//evilcoder.ru/wp-content/uploads/2018/01/play.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 60px;
    width: 90px;
    top: 50%;
    left: 50%;
    margin-left: -45px;
    margin-top: -30px;
    position: absolute;
    border-radius: 21px;
    background-position: 50% 50%;
    cursor: pointer;
}
.video1-play:hover {
      box-shadow: 0 0 12px 0 #000;
}
</style>

<script>
function videoplay(button) {
    let par = button.parentNode;
    let videoId = button.getAttribute('data-video');
    par.innerHTML = '<iframe src="//www.youtube.com/embed/' + videoId + '?autoplay=1" scrolling="no" style="width: 100%; height: 100%;" allow="autoplay"></iframe>';
}
</script>

<div class="video1">
    <div class="video1-play" data-video="ID-ВИДЕО" onclick="videoplay(this);"></div>
</div>

Выглядеть это будет как-то вот так:

Всё было сделано максимально просто дабы показать сам способ ускорения страницы за счёт отказа от айфреймов, написанный код рабочий, но очень далёк от идеального.