あなたはこのデモで見ることができる2つのdiv

Question

の要素に等しい高さを設定し、私はいくつかのテキストの隣に座ってビデオ持っている：同じ高さになるように http://fiddle.jshell.net/u9t48jpc/show/light/

ことが可能です私はビデオ領域を伸ばすことができますしていますテキストブロックは？

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

次に、CSSを追加します。ここでは

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

あなたは

ページのheadタグ内の一致高さライブラリCDNのスクリプトタグを追加を行うために必要なものです動画とテキストの両方の列で一致するクラス：

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

次に、ビデオの行に適用され、唯一のビデオDIVカラムに適用する黒背景CSSクラスを追加します。

.blackbg { 
    background-color:black; 
} 

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

次に、の高さに一致するようにmatchHeight（）メソッドを呼び出すことができますcolomnsは、次のように：

は$(document).on('click','.js-videoPoster',function(ev) {行の前に次のjQueryの文

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

を入れてください。 .videoWrapperクラスで

：

は最後に次のCSSスタイルのあなたのCSSの編集を行います。 position:relative;プロパティを削除します。

.videoPoster:afterクラスです。値にmargin:を編集したビデオの行がテキスト行の高さと一致し、また、ビデオ初期画面をズームインように見えるかもしれませんが、あなたがビデオを再生するときプレイヤーはの世話をするようになります-25px 0 0 -13px

これらのすべての変更映像自体のアスペクト比。 http://codepen.io/Nasir_T/pen/PbYmrz

ハッピーコーディング：あなたのコードと私の提案を使用して

サンプル。