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

我只是想起了为什么我不喜欢iframe：）

这应该可行，您或多或少只需要将相同的功能绑定到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>

父元素的视频宽度为100％，自动高度为（16：9）

1 个答案: