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?
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,
}