videoWidth and videoHeight properties on html5 video element are 0 for .mov quicktime video

Question

In javascript I'm trying to get the videoWidth and videoHeight of a html5 video element that I have loaded with a .mov quicktime video.

Here's is an excerpt of the relevant code:

var video = $('<video></video>');
video.prop('src', reader.result.replace(
    // Trick browsers to render MOV files
    /^data:video\/quicktime;base64,/,
    'data:video/mp4;base64,'
));

video.one('loadedmetadata loadeddata', function(e) {
//check this.videoWidth and this.videoHeight
...

This code has worked thus far on all other videos we've tried it with and even other .mov quicktime sample files downloaded from the web. For this particular video, I've checked the videoWidth and videoHeight properties on both loadedmetadata and loadeddata events and those properties are 0 after both events. There are some other properties that populate correctly such as duration though. The video is from a client's iphone, then sent to his macbook via airdrop, then uploaded via safari. Other media players seem to play this file correctly and it shows the correct dimensions when inspecting the details of the video file in my os.

Any help on how to get the proper video dimensions of this video using javascript or jquery, would be appreciated, thank you.