Executing a function ? works only on resize

Question

I'm trying to make a div the same height of a video on my website.

so I executed this:

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

in

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

and in

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

but the height is only accurate when I resize the window, not on refresh. What should I do ?

when refreshing : the video is 554 pixels high and my div 493 pixels

when resizing : it is equal

Any ideas ?

EDIT:

Here is my video tag:

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

@Baptiiste Amaud: can you upload any sample fiddle. Mean while you trigger re-size function in ready function also. — Rayudu, May 27 '16 at 12:46

score 1 · Answer 1 · edited May 23 '17 at 12:22

1

Maybe it'll work like this:

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

edited May 23 '17 at 12:22

Community

1
1

answered May 27 '16 at 12:44

Viktor Koncsek

564
3
13

1

That's correct, the page may be loaded, but the video hasn't, so dimensions aren't available. The original code may work by luck of the video is cached. The only thing is that don't have to wait for the whole video to load, just its metadata, there's a metadata loaded event – Ruan Mendes May 27 '16 at 12:46
@BaptisteArnaud make sure your `video` variable is defined. – Mohit Bhardwaj May 27 '16 at 12:50

Ruan Mendes · Answer 2 · 2016-05-27T13:33:29.980

The video does not know its dimensions until metadata is loaded. Use https://developer.mozilla.org/en-US/docs/Web/Events/loadedmetadata

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

Note that the loadedmetadata event may already have fired by the time DOMReady fires so you may need to check the height before setting the handler.

Executing a function ? works only on resize

2 Answers2