michaelmcgurk michaelmcgurk - 1 month ago 9
HTML Question

Setting equal heights on elements in two divs

You can see in this demo, I have a video sitting next to some text:
http://fiddle.jshell.net/u9t48jpc/show/light/

Is it possible I can stretch the video area to be of the same height that the text block reaches?



// 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

Here is what you need to do

Add the match height library cdn script tag in your page head tag:

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

Next, add the css class matched in both video and text columns:

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

Next, add the black background css class to apply to the video row and apply it only to the video div column:

.blackbg {
  background-color:black;
}

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

Next, Lets call the matchHeight() method to match the height of the colomns as follows:

Put the following jquery statement

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

before the $(document).on('click','.js-videoPoster',function(ev) { line.

Lastly do the following css style edits in your css:

In the .videoWrapper class. Remove the position:relative; property.

In the .videoPoster:after class. edit the margin: to the value -25px 0 0 -13px

All these changes will make the video row match the height of the text row and also the video initial picture may look as zoomed in but when you play the video the player will take care of the aspect ratio of the video itself.

Sample using your code and my suggestions: http://codepen.io/Nasir_T/pen/PbYmrz

Happy coding.