XF 2.2 Как вставить видео с ютуба в шаблон?

[ФАКЕР]

Здравствуйте.
У меня есть вот такой код в шаблоне:

<div class="media__body">
<xf:if is="property('uix_welcomeSection__title')"><div class="uix_welcomeSection__title">{{ phrase('text_privetstvie_zagolovok') }}</div></xf:if>
<xf:if is="property('uix_welcomeSection__text')"><div class="uix_welcomeSection__text">{{ phrase('text_privetstvie_telo') }}</div></xf:if>
<xf:if is="property('uix_welcomeSection__url')"><xf:button href="{{ link(property('uix_welcomeSection__url')) }}" class="button--cta">{{ property('uix_welcomeSection__buttonText')}}</xf:button></xf:if>
</div>

И вот код видео с ютуба:

<iframe width="885" height="498" src="https://www.youtube.com/embed/2hNkNU4cJdw" title="Что Мы Увидим Если Осушить Океан" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Как сделать, что бы видео было слева от текста?

 

[Skaiman]

<div class="video-text">
    <div class="video bbMediaWrapper">
        <div class="bbMediaWrapper-inner">
            <iframe src="https://www.youtube.com/embed/2hNkNU4cJdw?wmode=opaque"
                    width="560" height="315"
                    frameborder="0" allowfullscreen="true"></iframe>
        </div>
    </div>
    <div class="text">
        Ita struuntur, indicatum est apud tyrum indumentum. Ita struuntur, indicatum est apud tyrum indumentum.
    </div>
</div>

.video-text {
    display: flex;
    .text {
        padding: 10px;
    }
}

 

[ФАКЕР]

<div class="video-text">
    <div class="video bbMediaWrapper">
        <div class="bbMediaWrapper-inner">
            <iframe src="https://www.youtube.com/embed/2hNkNU4cJdw?wmode=opaque"
                    width="560" height="315"
                    frameborder="0" allowfullscreen="true"></iframe>
        </div>
    </div>
    <div class="text">
        Ita struuntur, indicatum est apud tyrum indumentum. Ita struuntur, indicatum est apud tyrum indumentum.
    </div>
</div>

.video-text {
    display: flex;
    .text {
        padding: 10px;
    }
}

а как это сделать в media__body?
дело в том что media__body имеет своё оформление. фон.
если я изменю на video-text этого всего не будет.

 

[Skaiman]

<div class="media__body">
    <xf:if is="property('uix_welcomeSection__title')">
        <div class="uix_welcomeSection__title">
            {{ phrase('text_privetstvie_zagolovok') }}
        </div>
    </xf:if>
    <xf:if is="property('uix_welcomeSection__text')">
        <div class="uix_welcomeSection__text video-text">
            <div class="video bbMediaWrapper">
                <div class="bbMediaWrapper-inner">
                    <iframe src="https://www.youtube.com/embed/2hNkNU4cJdw?wmode=opaque"
                            width="560"
                            height="315"
                            frameborder="0"
                            allowfullscreen="true">
                    </iframe>
                </div>
            </div>
            <div class="text">           
                {{ phrase('text_privetstvie_telo') }}
            </div>
        </div>
    </xf:if>
    <xf:if is="property('uix_welcomeSection__url')">
        <xf:button href="{{ link(property('uix_welcomeSection__url')) }}"
                   class="button--cta">
                   {{ property('uix_welcomeSection__buttonText')}}
        </xf:button>
    </xf:if>
</div>