Адаптивная вставка YouTube кода

Полученный с YouTube код вставки видео не является адаптивным. Размеры iframe фиксированы. Это создаёт определённые проблемы. Сделаем iframe резиновым.

Для этого нам понадобится обернуть его в дополнительный блок классом wrap-youtube:

<div class="wrap-youtube"><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&mute=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></div>

Дальше немного CSS-магии:

<style>
.wrap-youtube {position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.wrap-youtube iframe {position:absolute;top:0;left:0;width:100%;height:100%;border-width:0;outline-width:0;}
</style>

и вуаля.

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