Get the original dimensions of a <video>

Question

I'm trying to have a list of videos and pictures, each resized to the same size for easier view.

when the user clicks on one of them, they should be resized to their original size (or that of the bounding box at max)

My problem is: how do i get the ORIGINAL dimensions of a video?

for images,

var img = new Image();
img.src= $(event.target).attr("src");
img.width   //this is the width
img.height  //this is the height

works like a charm.

But i can't find a way to do the same for a <video>. is there any at all?

I understand there's something about loading metadata, but the video IS already loaded, i just want to resize it to its original size (well i wouldn't have a problem with them being lazyloaded on resize, but i guess that's more of an effort)

Is it possible to do this? if so, how? jQuery preferred.

SOLUTION:

var video = $(event.target);
var width = video[0].videoWidth;

Answer 1

You can do that with native Javascript :

var video = $("#myvideo" ); //JQuery selector 
video[0].videoWidth; //get the original width
video[0].videoHeight; //get the original height

To get know too :

video[0].width; //get or set width for the element in DOM
video[0].height; //get or set height for the element in DOM

For more information you can check those links from W3 : videoWidth , videoHeight

Answer 2

The solutions posted didn't work for me. If anyone has the same issue, my solution may help out.

const video = document.getElementById("myVid")

video.addEventListener('loadeddata', function(e) {
    let width = e.target.videoWidth
    let height = e.target.videoHeight

    let elWidth = e.target.width
    let elHeight = e.target.height

 }, false)

Check it on https://codepen.io/guerrato/pen/aYNeaW