Question 36125 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jQuery – Get height of video before it finishes loading

I have an 8MB video set to "object-fit:contain" and need to retrieve its height before it finishes loading on mobile devices. Reason I need the height earlier is to position content overlaying the video by matching the video height on this content container.

I am not looking for the actual height of the video, but the height as rendered in the user’s browser / viewport.

If I try to get the height while it’s loading, I get a much smaller value (200 some pixels) than what it ends up being (usually 600 some pixels). I’ve been able to get the height AFTER it loads using the load() function, but this method is very slow because my video is 8MB in size.

Is there any workaround?

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();
        }
    });
});
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found how to find the video height by knowing the video width was 100%, therefore I just multiply the viewport width by the aspect ratio of the video.

    jQuery(document).ready(function($){
    function vidHeight() {  
        var viewportWidth = jQuery(window).width();
        var videoHeight = viewportWidth * 0.5625;
        jQuery("#section-feature").css("height", videoHeight+"px");
        //console.log("Video height is "+videoHeight)
    }   
    vidHeight();
    jQuery(window).on('resize', vidHeight);
});

  2. 0

    If you are planing to get the intrinsic height of the video, you may use the event listener loadedmetadata.

    document.getElementById('video').addEventListener('loadedmetadata', (e) => console.info(e.target.videoHeight));
    <video controls="true" poster="" id="video">
    <source type="video/mp4" src="http://www.w3schools.com/html/mov_bbb.mp4">
</video>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search