Видео 100% ширина родительского элемента, автоматическая высота (16: 9)

Question

Мне бы хотелось, чтобы оба видео имели ширину родительского элемента на 100% при сохранении соотношения сторон.

Родительский элемент составляет 50% ширины окна, поэтому видео должно быть адаптивным.

Я нашел десятки решений - практически одинаковых, - которые работают для видео, ширина страницы которого составляет 100% в качестве фоновой обложки.Однако, к сожалению, это не решение для меня.

Чтобы увидеть проблему, вам, вероятно, потребуется открыть ее в режиме полного просмотра страницы.

Спасибо, спасибо за любую помощь!

body {
  margin: 0;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gnD-w.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3gnD-w.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: local('Montserrat Black'), local('Montserrat-Black'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_epG3gnD-w.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7CA.ttf) format('truetype');
}
.jan-container {
  width: 100%;
  font-family: "Roboto Condensed";
}
.jan-container .headline-athletes {
  display: flex;
}
.jan-container .headline-athletes div {
  position: relative;
  width: 50%;
  height: 900px;
  background: red;
  margin: 0 60px 0 0;
  display: flex;
  flex-direction: column;
}
.jan-container .headline-athletes div .videoWrapper {
  width: 100% !important;
  height: auto;
}
.jan-container .headline-athletes div .videoWrapper iframe {
  width: 100% !important;
}
.jan-container .headline-athletes div:last-child {
  margin: 0;
}

<section class="jan-container">
  
  <div class="headline-athletes">
    <div>
      <div class="videoWrapper">
        <iframe src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>
    </div>
    
    <div>
      <div class="videoWrapper">
        <iframe src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>
    </div>
  </div>
  
</section>

Answer 1

я только что вспомнил, почему мне не нравятся iframes:)

это должно работать, вам более или менее нужно просто привязать одну и ту же функцию к событию aresize

var callback = function() {
  var videos = document.getElementsByClassName('videoWrapper__video');
  var ratio = 9 / 16;
  for (var i = 0; i < videos.length; ++i) {
    if (i === 0) continue; // remove this its just to show the difference
    videos[i].style.height = videos[i].clientWidth * ratio + 'px';
  }
}

window.onload = callback();

body {
  margin: 0;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gnD-w.ttf) format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_c5H3gnD-w.ttf) format('truetype');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: local('Montserrat Black'), local('Montserrat-Black'), url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_epG3gnD-w.ttf) format('truetype');
}

@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7CA.ttf) format('truetype');
}

.jan-container {
  width: 100%;
  font-family: "Roboto Condensed";
}

.jan-container .headline-athletes {
  display: flex;
}

.jan-container .headline-athletes div {
  position: relative;
  width: 50%;
  height: 900px;
  background: red;
  margin: 0 60px 0 0;
  display: flex;
  flex-direction: column;
}

.jan-container .headline-athletes div .videoWrapper {
  width: 100% !important;
  height: auto;
}

.jan-container .headline-athletes div .videoWrapper iframe {
  /*width: 100% !important;*/
  background: green;
  /* just for showing the iframe */
}

.jan-container .headline-athletes div:last-child {
  margin: 0;
}

<section class="jan-container">

  <div class="headline-athletes">
    <div>
      <div class="videoWrapper">
        <iframe class="videoWrapper__video" src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>
    </div>

    <div>
      <div class="videoWrapper">
        <iframe class="videoWrapper__video" src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>
    </div>
  </div>

</section>