How to get width of a HTML5 Video element?

Question

In the below I try to log width of the video but it comes as 0. how Can i correctly get the width and height ?

 function doSomething() { const el = document.querySelector('video'); console.log('el.offsetLeft', el.offsetLeft); console.log('el.offsetTop', el.offsetTop); console.log('el.width', el.width); console.log('el.height', el.height); } 

 .flex-center { display: flex; justify-content: center; align-items: center; align-self: center; } .container { padding: 50px; } 

 <div class="container"> <video class="flex-center" controls preload onloadedmetadata="doSomething()"> <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> </video> </div> 

Answer 1

This works for me! (Note I am using offsetWidth and offsetHeight instead of just width and height ).

 function doSomething() { const el = document.querySelector('video'); console.log('el.offsetLeft', el.offsetLeft); console.log('el.offsetTop', el.offsetTop); console.log('el.style.width', el.offsetWidth); console.log('el.height', el.offsetHeight); } 

 .flex-center { display: flex; justify-content: center; align-items: center; align-self: center; } .container { padding: 50px; } 

 <div class="container"> <video class="flex-center" controls preload onloadedmetadata="doSomething()"> <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> </video> </div>