I have a video that's 8MB in size set to "object-fit:contain" and I need to find its height before it finishes loading on mobile devices. The reason for this is so that I can position content overlaying the video by matching the video's height with the content container.
What I'm trying to achieve is not the actual height of the video, but rather the height as it appears in the user's browser/viewport.
When I attempt to retrieve the height while the video is still loading, I get a much lower value (around 200 pixels) compared to what it actually ends up being (usually around 600 pixels). Although I've managed to get the correct height after the video has loaded using the load() function, this method is quite slow due to the large file size of my video.
Is there any workaround available for this issue?
jQuery(document).ready(function($){
function vidHeight() {
var newHeight = jQuery('#section-feature-device video').height();
jQuery(".elementor-element-0113321").css("height", newHeight+"px");
}
jQuery(window).load(function () {
var win = jQuery(this);
if (win.width() <= 767) {
vidHeight();
}
});
});