Обрывки кода. Как сплющить контейнер для видео так, чтобы он стал адаптивным

Пример кода и ссылка на статью, в которой разжевано про прием с контейнером height: 0; padding-bottom: 56.25%; Здесь же ссылка - напоминания о формировании моего презрения к Joomla (вместе с хаками стилей)

Joomla. Хаки стилей. Три столбца, кнопки "ReadMore", резиновые iframe - это мой предыдущий ченовик, в котором есть ссылки, но про резиновые фреймы написано плохо.
How to Make Responsive Iframes — it’s easy! - а отсюда я взял код для первого примера... Там еще примеры с javascript и Sass
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world

О чем речь:¶

In [1]:

%%html
<div class="intrinsic-container intrinsic-container-16x9">
  <iframe src="https://www.youtube.com/watch?v=1m6WR7e7qwU" allowfullscreen></iframe>
</div>

In [2]:

%%html
<style>
.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
 
/*16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}
 
.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

Proportionally Resize iframes Using JS¶

What if you don’t know the aspect ratio? Let’s say you have content authors creating interactives with each having different dimensions. Without knowing the aspect ratio of the iframe, it’s not easy to implement the intrinsic ratio technique.

You can overcome this problem by using JS:

In [ ]:

%%html
<script>
// Find all iframes
var $iframes = $( "iframe" );
 
// Find &#x26; save the aspect ratio for all iframes
$iframes.each(function () {
  $( this ).data( "ratio", this.height / this.width )
    // Remove the hardcoded width & height attributes
    .removeAttr( "width" )
    .removeAttr( "height" );
});
 
// Resize the iframes when the window is resized
$( window ).resize( function () {
  $iframes.each( function() {
    // Get the parent container`s width
    var width = $( this ).parent().width();
    $( this ).width( width )
      .height( width * $( this ).data( "ratio" ) );
  });
// Resize to fix all iframes on page load.
}).resize();
</script>

Посты чуть ниже также могут вас заинтересовать