Ролик YouTube не адаптируется в смартфоне - Вопросы по CSS

Уважаемые форумчане помогите! Вывел ролик, предварительно загруженный в YouTube, на сайт через написание кода HTML в материале без редактора. Вот страница сайта https://www.kfhbelous.ru/na-zametku/sovety/33-kak-privit-krupnoe-plodovoe-derevo
Сайт на Joomla 3.9.2, шаблон - Favourite. Сам сайт хорошо адаптирован к различным экранам. В него встроен Bootstrap. Ролик YouTube к смартфону не адаптирован. В сети все предлагают следующий способ решения : код HTML помещается в div c определенным классом, например thumb-wrap, в ccs файл вписываются правила:
.thumb-wrap {
  position: relative;
  padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.thumb-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
Проблема определить в какой файл правила вписать. Пробовал в разные - не работает.
bootstrap все путает. Не работает и вариант вписать стили непосредственно в код дива.
Подскажите, пожалйста, решение.

здра.
вы можете при вставке кода ютьюба задавать 100% ширину фрейму
откройте статью в режиме без редактора и замените текущую ширину на процентную

либо смотрите в папке со стилями, есть ли там user или сustom.css
и туда прописывайте
либо в файл темы, если у вас шаблон не затирает их. судя по раскраске шаба, не затирает

вы можете при вставке кода ютьюба задавать 100% ширину фрейму
Код
<iframe width="100%" height="315" src=...

Спасибо большое! этот вариант хороший. Правда имеется недостаток: появляются черные поля на компе  по бокам, на смарте сверху и снизу. Может надо что-то специфическое в данные height. Вообще раньше я пробовал вариант width="100%" height="100%".Не работает.

может вам проще через плагин вставлять?
просто есть бесплатные готовые решения, которые корректно ставят код без танцев с бубном и без отключения редактора через шорткод.
https://extensions.joomla.org/extension/dd-youtube-eu-privacy/
вот этот респонсивный код формирует без полос

либо в файл темы, если у вас шаблон не затирает их. судя по раскраске шаба, не затирает

Извините, не совсем понял про файл темы:  В шаблоне есть отдельная папка с ccs файлами, а есть папка bootstrap, в которой тоже есть ccs  файлы.Или это файл theme.ccs?

theme или style.css, но код может просто затереться через какое-то время - это надо знать, как ваш шаблон устроен.

поставьте плагин, это лучшее решение.

может вам проще через плагин вставлять?
просто есть бесплатные готовые решения, которые корректно ставят код без танцев с бубном и без отключения редактора через шорткод.
https://extensions.joomla.org/extension/dd-youtube-eu-privacy/
вот этот респонсивный код формирует без полос

Ну если это так сложно! То придется.Не хотелось лишними прогами загружать. Да и хотелось поглубже разобраться.

вот я не стал разбираться и поставил плагин, потому что iframe с видео - это не тот случай, когда стоит вникать, т.к.
это сторнний код и ничему вы не научитесь на нем.
да и вам вставлять видео удобней будет.