I have on my HTML page video player and player change dimensions depends on browser window side. So On start my video is 1280x720, and when I make my browser window smaller, my video is also smaller. I want to add button which will print to console current dimensions of video. I tried like this:

<button onclick="getDimensions()">getDimensions</button>

  <script>
      const myVideo = document.getElementById("video1");
      
      function getDimensions() {
        let height = myVideo.videoHeight;
        let width = myVideo.videoWidth;
        console.log(height, width);
      }
 </script>

but this code only print start dimensions 1280x720px. Does anyone have idea how to fix this?

CodePudding user response：

First you need to identify element:

element = document.getElementById('id');

and now get information about the size of an element and its position relative to the viewport.

domRect = element.getBoundingClientRect();

if i print it:

DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

Documentation