Как конвертировать видео iframe в форматное соотношение 16by9

Question

У меня есть существующий код для видео, встроенный в iframe.Я хочу конвертировать это видео в формат 16: 9.Я не могу изменить CSS, примененный к классу .parent1.Любая помощь, как это возможно через CSS?

.parent1 {
  position: absolute;
  left: 37%;
  top: 14%;
}

<div class="parent1">
  <div class="parent2">
    <iframe width="560" height="280" src="https://www.youtube-nocookie.com/embed/-UD4yHnEMeM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

Answer 1

Вот простой плагиат отзывчивой вставки начальной загрузки:

https://codepen.io/denns/pen/NLYWQJ?editors=0100

главное это:

.parent {
    position: relative;
    display: block;
    width: 500px;  // you will most like use 100% to fit into its parent
    padding: 0;      
}

.parent::before {
    content: '';
    display:block;
    padding: 56.25% 0 0 0;
}

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

Вот он в действии на собственном сайте начальной загрузки: https://getbootstrap.com/docs/4.1/utilities/embed/