Как разместить видео с YouTube и картинку в одну строку?

Question

[Алексей]

Приветствую!

Появилась необходимость разместить видео и картинку в одну строку. Что-то вроде такого:

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

Как только не старался это реализовать и с помощью div-ов и таблицей, но все равно выходит все очень криво и в мобильной версии либо рвет верстку, либо изображение сжимается до не различимых размеров.
Подскажите, пожалуйста, как это можно реализовать.

Comments

[Spartak (Web-StyleStudio)]

Пробовали для iframe и блока с текстом применить display: inline; или display: inline-block;

[Spartak (Web-StyleStudio)]

Или использовать флексы или гриды?

[Алексей]

Spartak (Web-StyleStudio), спасибо за ответ!

inline-block пробовал, в jsfiddle все встает как надо и при сжатии экрана картинка падает под видео. То есть все как и должно быть. А на сайте почему-то вот такая картина:


Сам код:

<div align="center" style="display:inline-block;">

<iframe width="500" height="315" src="https://www.youtube.com/embed/8R3vl4fFY1o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>

<a href="#sert.jpg">    <img src="/image/catalog/sertificat/sert.jpg" class="img-responsive" style="max-height: 315px;">  </a>  <a id="sert.jpg" href="#" class="full" style="background-image:url(/image/catalog/sertificat/sert.jpg)"></a>
</div>

Стили нарочно выведены в html для проверки на сайте.

С флексами и гридами знаком очень-очень поверхностно, поэтому не использовал.

[Spartak (Web-StyleStudio)]

Алексей,
Уточните как фрейм и ссылка с изображением должны быть расположены относительно друг друга

[Алексей]

Spartak (Web-StyleStudio), попробую изобразить визуально.
На дескстопе должно выглядеть вот так:

То есть, видео и изображение находятся на одной линии.
На мобильной версии так:

При уменьшении экрана изображение уходит под видео.

[Spartak (Web-StyleStudio)]

Алексей,
А какая ширина картинки с сертификатом?

[Spartak (Web-StyleStudio)]

Алексей,
И почему две ссылки с сертификатом?