機能を実行していますか？サイズ変更時にのみ動作します

Question

私は自分のウェブサイトで同じ高さのビデオを作成しようとしています。

$(document).ready(function(){} 

にし、

$(window).resize(function(){} 

に

var videoHeight = 0; 
videoHeight = $("video").css("height"); 
$(".tester").css("height", videoHeight); 

が、私はいないリフレッシュに、ウィンドウのサイズを変更する場合、高さは正確である：

ので、私はこれを実行します。私は何をすべきか ？

さわやか：ビデオは554個のピクセルの高さと、私のdivの493ピクセル

リサイズ：それは

任意のアイデアが等しいのですか？

編集：ここでは

は私のvideoタグである：

<video class="video" preload="auto" loop="loop" controls> 
     <source src="video/demo.mp4" type="video/mp4"> 
    Your browser does not support the video tag. 
</video> 

Answer 1

多分それはこのように動作します：ビデオは、その寸法を知らない

video.addEventListener('loadedmetadata', function() { 
    // Video is loaded and can be played 

    var videoHeight = 0; 
    videoHeight = $("video").css("height"); 
    $(".tester").css("height", videoHeight); 
}, false); 

Wait until an HTML5 video loads

Answer 2

メタデータが読み込まれるまであなたはハンドラを設定する前に高さを確認する必要があるかもしれませんので、loadedmetadataイベントはすでに時間でDOMReady火を発射した可能性があることhttps://developer.mozilla.org/en-US/docs/Web/Events/loadedmetadata

video.addEventListener('loadedmetadata', function() { 
    var videoHeight = $("video").css("height"); 
    $(".tester").css("height", videoHeight); 
}, false); 

注意を使用してください。