3

I have a <video> element that is generated by js, and I need to get the height and width of it.

var v = $('video'); v.height() returns null, because when it's run, the video hasn't yet been loaded, so no dimensions in the DOM.

How do I check to see if the video has received a dimension, and if it hasn't, wait till it has to get the height and width.

Thanks.

Edit:

I've created a jsbin with my example code:

http://jsbin.com/udazu/2/edit

Thanks.

Edit: whoops, made an error in the sample code.

Mark
  • 32,293
  • 33
  • 107
  • 137

1 Answers1

5

Update based on new code - You can use the loadedmetadata event for this, I've updated your jsbin example here with this

$('input').click(function () {
  $('#thumbnail video').clone().bind('loadedmetadata', function() {
    alert($('#viewing-area video').height());
  }).appendTo('#viewing-area');
});
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • Thanks, however, the video is generated by js after the page is already loaded, due to user interaction, I tried using .load on the video element specifically... but that doesn't quite work either. – Mark Apr 27 '10 at 01:01
  • I've added a jsbin with sample code in it, thanks a lot for your help. – Mark Apr 27 '10 at 01:54
  • @Mark - Thanks for the example, I updated the answer for this, let me know if it needs another tweak :) – Nick Craver Apr 27 '10 at 02:18