Регулировка ширины / высоты дисплея Youtube в зависимости от ширины DIV

Question

Youtube iframe необходимо масштабировать в зависимости от ширины контейнера div. Ширина варьируется в зависимости от макета фрагмента страницы.

Соотношение сторон видео на Youtube составляет 560/315, ширина / высота.

В том, что я пробовал (см. Ниже), высота iframe на YouTube слишком мала и обрезает миниатюру.

В действительности, это миниатюра, которая обрезается. Если вы воспроизводите видео, соотношение апсектов корректируется…

НО видео слишком узкое (крошечное), потому что оно отображается с высотой контейнера iframe, который слишком короткий.

Это происходит в последних браузерах Firefox и Chrome.

Как мне заставить дисплей корректировать видео в правильном соотношении сторон в контейнере div?

См. https://codepen.io/iamalta/pen/MMwwwK

Видео здесь: https://www.youtube.com/watch?v=UDV161pAcUU

КОД HTML:

<div class="col-12">
   <div class="left col-6">
       <iframe class="left youtube" src="https://www.youtube.com/embed/UDV161pAcUU" frameborder="0"
           allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
       </iframe>
   </div>

   <div class="left col-6">
       <div class="p1">
           This Tropical Water Lily Preview Video shows Tricker's and the wonderful world of Tropical Water
           Lilies. Some scenes are from our DVD Introduction to Water Gardening. Purchase entire DVD.
       </div>
       <div class="clearfix"></div>

       <div class="col-12 p0">
           <img src="https://www.tricker.com/media/ecom/description/redtropicalheading1.jpg" class="img-100-auto" />
       </div>
   </div>
</div>

CSS

.youtube{
  width: 560px;
  height: 315px;
  max-width: 100%;
  height: 56.25%;
}
.img-100-auto{width:100%;height:auto}
.clearfix:after, .clearfix:before{content:" ";display:table}
.clearfix:after{clear:both}
.col-6{width:50%}
.col-12{width:100}
.left{float:left}
.p1{padding:rem}
.center{text-align:center}

Заранее благодарим вас за ваши предложения и, надеюсь, ответ, который работает!

Answer 1

Я заметил, что на css был тип для .youtube.

У него было две высоты.

Если я уберу это, высота будет слишком высокой.

Это также не работает:

.youtube{width: 1120px;height:56.25%;max-width:100%;}

---

Я нашел это! Спасибо за вашу помощь. Я работал над этим весь день и ценю ваше предложение.

https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed

Answer 2

Что если вместо процентов вы использовали vw и вычислите высоту, которая будет шириной, деленной на соотношение сторон. Возможно, вам придется настроить ширину, чтобы она немного лучше подходила из-за заполнения каждого элемента.

Итак, это:

.youtube{
  width: 50vw;
  height: calc(50vw/1.77);
}