在两个div中的元素上设置相等的高度

Question

你可以在这个演示中看到，我在一些文字旁边有一个视频： http://fiddle.jshell.net/u9t48jpc/show/light/

我是否可以将视频区域拉伸到与文本块相同的高度？

// poster frame click event
$(document).on('click', '.js-videoPoster', function(ev) {
  ev.preventDefault();
  var $poster = $(this);
  var $wrapper = $poster.closest('.js-videoWrapper');
  videoPlay($wrapper);
});

// play the targeted video (and hide the poster frame)
function videoPlay($wrapper) {
  var $iframe = $wrapper.find('.js-videoIframe');
  var src = $iframe.data('src');
  // hide poster
  $wrapper.addClass('videoWrapperActive');
  // add iframe src in, starting the video
  $iframe.attr('src', src);
}

// stop the targeted/all videos (and re-instate the poster frames)
function videoStop($wrapper) {
  // if we're stopping all videos on page
  if (!$wrapper) {
    var $wrapper = $('.js-videoWrapper');
    var $iframe = $('.js-videoIframe');
    // if we're stopping a particular video
  } else {
    var $iframe = $wrapper.find('.js-videoIframe');
  }
  // reveal poster
  $wrapper.removeClass('videoWrapperActive');
  // remove youtube link, stopping the video from playing in the background
  $iframe.attr('src', '');
}

.videoWrapper {
  position: relative;
  width: 100%;
  height: 0;
  background-color: #000;
}
.videoWrapper43 {
  padding-top: 75%;
}
.videoWrapper169 {
  padding-top: 56%;
}
.videoIframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.videoPoster {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  outline: none;
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-size: cover;
  text-indent: -999em;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: opacity 800ms, height 0s;
  -moz-transition: opacity 800ms, height 0s;
  transition: opacity 800ms, height 0s;
  -webkit-transition-delay: 0s, 0s;
  -moz-transition-delay: 0s, 0s;
  transition-delay: 0s, 0s;
}
.videoPoster:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 5px solid #fff;
  border-radius: 100%;
  -webkit-transition: border-color 300ms;
  -moz-transition: border-color 300ms;
  transition: border-color 300ms;
}
.videoPoster:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -20px 0 0 -10px;
  border-left: 40px solid #fff;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  -webkit-transition: border-color 300ms;
  -moz-transition: border-color 300ms;
  transition: border-color 300ms;
}
.videoPoster:hover:before,
.videoPoster:focus:before {
  border-color: #f00;
}
.videoPoster:hover:after,
.videoPoster:focus:after {
  border-left-color: #f00;
}
.videoWrapperActive .videoPoster {
  opacity: 0;
  height: 0;
  -webkit-transition-delay: 0s, 800ms;
  -moz-transition-delay: 0s, 800ms;
  transition-delay: 0s, 800ms;
}
body {
  font-family: avenir, sans-serif;
}
main {
  max-width: 800px;
  margin: 20px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-6">
      <!-- the class "videoWrapper169" means a 16:9 aspect ration video. Another option is "videoWrapper43" for 4:3. -->
      <div class="videoWrapper videoWrapper169 js-videoWrapper">
        <!-- YouTube iframe. -->
        <!-- note the iframe src is empty by default, the url is in the data-src="" argument -->
        <!-- also note the arguments on the url, to autoplay video, remove youtube adverts/dodgy links to other videos, and set the interface language -->
        <iframe class="videoIframe js-videoIframe" src="" frameborder="0" allowTransparency="true" allowfullscreen data-src="https://www.youtube.com/embed/hgzzLIa-93c?autoplay=1& modestbranding=1&rel=0&hl=sv"></iframe>
        <!-- the poster frame - in the form of a button to make it keyboard accessible -->
        <button class="videoPoster js-videoPoster" style="background-image:url(http://i2.wp.com/www.cgmeetup.net/home/wp-content/uploads/2015/05/Avengers-Age-of-Ultron-UI-Reel-1.jpg);">Play video</button>
      </div>
    </div>
    <div class="col-md-6">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut odio nec nisl hendrerit gravida. Mauris nec neque ante. Quisque rutrum mauris sed mauris consectetur iaculis. Sed sit amet consequat metus, sodales vehicula diam. Integer sit amet sagittis
      nulla. Cras venenatis arcu mauris, malesuada congue diam pharetra nec. Sed tincidunt, quam sit amet congue varius, ex est vehicula libero, at tincidunt diam arcu sed felis. Mauris eleifend rutrum velit id porttitor. Suspendisse sit amet turpis ut
      enim maximus consequat. Vestibulum rhoncus, sem ut ullamcorper dapibus, tellus elit gravida nibh, quis tempus orci libero a tellus. Sed pellentesque pulvinar rutrum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
      egestas. Suspendisse in ultrices libero. Nulla ut pharetra leo. Proin sit amet aliquam tortor, in porttitor urna. Donec vitae sem auctor, laoreet nunc at, interdum elit. Phasellus molestie, est non faucibus accumsan, leo magna lobortis orci, non
      condimentum metus dolor at nisi. Sed pharetra pretium lacus at congue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce a tempor quam. Quisque porta dui enim. Suspendisse non porttitor nunc, tempus
      dignissim risus. Donec ac orci eu sapien fermentum faucibus ut eget tellus. Pellentesque lectus sapien, gravida non quam quis, dictum consequat justo. Donec vel nisi ultricies, cursus est eget, elementum sapien. Quisque sit amet auctor leo. Phasellus
      lorem urna, aliquam a diam non, ornare pulvinar erat. Fusce laoreet quam ut tempor tristique. In quis imperdiet libero. Donec non efficitur urna, quis semper justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis
      in faucibus orci luctus et ultrices posuere cubilia Curae;
    </div>
  </div>
</div>

Answer 1

这是你需要做的事情

在页眉标记中添加匹配高度库cdn脚本标记：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"></script>

接下来，添加视频和文本列中匹配的css类：

<div class="col-md-6 matched">

接下来，添加黑色背景css类以应用于视频行并仅将其应用于视频div列：

.blackbg {
  background-color:black;
}

<div class="col-md-6 matched blackbg">

接下来，让我们调用matchHeight（）方法来匹配colomns的高度，如下所示：

放入以下jquery语句

$('.matched').matchHeight();

在$(document).on('click','.js-videoPoster',function(ev) {行之前。

最后在你的css中进行以下css样式编辑：

在.videoWrapper课程中。删除position:relative;属性。

在.videoPoster:after课程中。将margin:修改为值-25px 0 0 -13px

所有这些更改都会使视频行与文本行的高度相匹配，并且视频初始图片可能看起来像放大，但是当您播放视频时，播放器将处理视频本身的宽高比。

使用您的代码和我的建议示例：http://codepen.io/Nasir_T/pen/PbYmrz

快乐的编码。