Видео с youtube сжимается по высоте в сполере

Создал доп поле и вставляю в него ID видео с Youtube. Работает, т.е. выводится, но видос сжимается по высоте и это выглядит реально стремно. Пробовал через chatgpt решить, но его решения не срабатывают.
Подскажите как решить, кто-то сталкивался с подобной проблемой?

Код вывода в шаблоне:

Код:

<!-- Spoiler start -->
<dl><dt class="title_spoiler">
<a href="javascript: void(0);" onclick="var spoiler = this.parentNode.parentNode.getElementsByTagName('dd')[0]; if ( spoiler.style.display == 'none' ) { spoiler.style.display = 'block';} else { spoiler.style.display = 'none';};">
Видео обзор - Показать/Скрыть</a> </dt>
<dd class="text_spoiler" style="display: none;">
[xfgiven_video]<iframe width="560" height="315" src="//www.youtube.com/embed/[xfvalue_video]" frameborder="0" allowfullscreen></iframe>[/xfgiven_video]</dd></dl>
<br>
<!-- Spoiler end -->

Стили:

Код:

.title_spoiler {
    color: #636363;
    background-color: #f2f2f2;
    border: 1px solid #bebebe;
    font-weight: bold;
    padding: 5px;
}

.text_spoiler {
  border: 1px solid #bebebe;
  padding: 10px;
  text-align: center; /* <<< Это центрирует iframe */
}

.text_spoiler iframe {
  max-width: 100%;
  height: auto;
  display: inline-block; /* для корректного центрирования */
}

Дополнительно подгружается скрипт сполера в main.tpl перед </body>:

Код:

function toggleSpoiler(element) {
  var spoiler = element.parentNode.parentNode.getElementsByTagName('dd')[0];
  if (spoiler.classList.contains('open')) {
    spoiler.classList.remove('open');
  } else {
    spoiler.classList.add('open');
  }
}