Изображение и видео как реагирующие элементы с одинаковыми пропорциями

Question

Я хочу разместить изображение и видео лицом к лицу с одинаковыми размерами. Изображение имеет соотношение сторон 16:9, поэтому видео iframe должно быть таким же. И оба элемента должны быть отзывчивыми.

Как я могу это сделать?
Вот моя попытка, но безуспешно:

.wrap {
  text-align: justify;
  text-align-last: justify;
}

.imgt {
  display: inline-block;
  width: 45%;
}

.imgt {
  display: inline-block;
  width: 45%;
}

.framewrap {
  display: inline-block;
  width: 45%;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: gold;
}

.iframetop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 55%;
}

<div class='wrap'>
  <img class='imgt' src='https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg' alt='img'>
  <div class='framewrap'>
    <iframe class='iframetop' src="https://www.youtube.com/embed/N4zVExS5mgg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>

Answer 1

Похоже, что текущая проблема заключается в том, что padding-bottom на .framewrap рассчитывается по ширине содержащего блока. Поскольку .framewrap также имеет width:45%, пропорции не соответствуют вашим намерениям.

Значение padding-bottom должно составлять 45% от 56,25%, например:

.wrap {
  text-align: justify;
  text-align-last: justify;
}

.imgt,
.framewrap {
  display: inline-block;
  width: 45%;
}

.framewrap {
  position: relative;
  background: gold;
  overflow: hidden;
  height: 0;
  padding-bottom: calc(56.25% * .45);
}

.iframetop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class='wrap'>
  <img class='imgt' src='https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg' alt='img'>
  <div class='framewrap'>
    <iframe class='iframetop' src="https://www.youtube.com/embed/N4zVExS5mgg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

Однако я предлагаю использовать псевдоэлемент из .framewrap для установки нижнего отступа, так как это значение будет вычислено из ширины .framewrap.

Вот демонстрация:

.wrap {
  text-align: justify;
  text-align-last: justify;
}

.imgt,
.framewrap {
  display: inline-block;
  width: 45%;
}

.framewrap {
  position: relative;
  background: gold;
  overflow: hidden;
}

.framewrap::before {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}

.iframetop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class='wrap'>
  <img class='imgt' src='https://static.pexels.com/photos/111788/pexels-photo-111788-large.jpeg' alt='img'>
  <div class='framewrap'>
    <iframe class='iframetop' src="https://www.youtube.com/embed/N4zVExS5mgg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

Answer 2

Попробуйте:

HTML

  <img class='imgt' src='https://static.pexels.com/photos/111788/pexels-photo-111788- 
   large.jpeg' alt='img'>

  <iframe class='iframetop' src="https://www.youtube.com/embed/N4zVExS5mgg" 
  frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; 
  picture-in-picture" allowfullscreen></iframe>

CSS

.imgt, .iframetop {
  display: inline-block;
  width: 45%;
  height: 200px; // add height according to your need
}

кодовая рабочая демоверсия