Выполнение функции? работает только при изменении размера

Question

Я пытаюсь сделать div той же высотой видео на моем сайте.

так я выполнил это:

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

в

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

и

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

но высота дает точные показания при изменении размера окна, а не на обновления. Что мне делать ?

при обновлении: видео высокой 554 пикселей и мои ДИВ 493 пикселей

при изменении размера: оно равно

Любые идеи?

EDIT:

Вот мое видео тег:

<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

видео не знает его размеры пока метаданные не будут загружены. Используйте https://developer.mozilla.org/en-US/docs/Web/Events/loadedmetadata

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

Обратите внимание, что loadedmetadata событие может уже запускаемое время DOMReady пожары, так что вы, возможно, потребуется проверить высоту перед установкой обработчика.