вопрос
Создал доп поле и вставляю в него ID видео с Youtube. Работает, т.е. выводится, но видос сжимается по высоте и это выглядит реально стремно. Пробовал через chatgpt решить, но его решения не срабатывают.
Подскажите как решить, кто-то сталкивался с подобной проблемой?
Код вывода в шаблоне:
Стили:
Дополнительно подгружаю скрипт сполера в main.tpl перед :
Подскажите как решить, кто-то сталкивался с подобной проблемой?
Код вывода в шаблоне:
<!-- 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 перед :
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');
}
}Для iframe установить aspect-ratio: 16 / 9
