Как изменить размер видео, чтобы оно соответствовало размеру изображения над ним?

Question

Я пытаюсь найти способ масштабировать видео так, чтобы оно соответствовало ширине моей фотографии в заголовке.

Как бы масштабировать видео до того же размера, что и на оригинальном сайте?Вот кодексhttps://codepen.io/anon/pen/wZbjNw

Для справки, я пытаюсь подражать этому сайту: https://jackwhiteiii.com/

.jwlogo {
  max-width: 69%;
  height: auto;
  padding: 13px;
  image: no-repeat
}

.video {
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 13px;
}

<header>
  <div class="headerlogo">
    <img class="jwlogo" src="https://jackwhiteiii.com/wp-content/themes/lazaretto/images/JW_BHR_SplashPage_tiny.jpg" alt="Header Logo">
  </div>
</header>
<container>
  <div class="video">
    <iframe class="vevovideo" width="560" height="315" src="https://www.youtube.com/embed/8vKTaoxvZMY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</container>

Answer 1

Обычная практика, когда вы хотите сделать отзывчивое видео (ширина 100% и высота в соответствии с ним), это позиционировать его абсолютно внутри элемента с псевдо-отступом, установленным в соответствии с соотношением сторон видео.

Вот пример:https://codepen.io/crishpeen/pen/Pgvabw

Я также добавил логотип и видео к .container, чтобы они имели одинаковую ширину.