Can't control the video height with having videoFoam=true in wistia video

Question

I am trying to embed a video using wistia. The issue i am having is that with the script there is an attribute videoFoam = true which handles the responsives of the video based on the screen width it sets the height of the video. But with my current style if i use videoFoam attribute it cuts off part of the video which is not desireable and if i remove videoFoam = true then we can see the video based on avaialble height the parent have but it add blackscreen on both sides of the vide to fill the void.

code scnippet for the iframlink from inspect element. if you to visit the site https://sensxpert.dev5.yoyaba(dot)tech/home-new/ [i have added (dot) so that stackoverflow don't discard this link]

<iframe loading="lazy" id="heroIframe" src="https://fast.wistia.net/embed/iframe/nbliv0r4iq?seo=false" title="SEN23011 - Website Homepage Stinger Film v2.0 Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" msallowfullscreen="" width="100%" height="100%" allowfullscreen="" style="height: 801px;" data-lf-form-tracking-inspected-belvo73pke14zmqj="true" data-lf-yt-playback-inspected-belvo73pke14zmqj="true" data-lf-vimeo-playback-inspected-belvo73pke14zmqj="true"></iframe>```

and this is my iframe-block
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>


<style>
    .iframe-banner {
        position: relative;
        z-index: 1;
        top: 0;
        transition: top 0.3s;
    }

    .iframe-container {
        padding-top: 128px;
        padding-bottom: 56px;
        background: #000755;
    }

    #heroIframe {
        left: 0;
        width: 100%;
        min-height: 300px;
        border: none;
        z-index: 2;
    }
</style>
<?php
$link = get_field('link');
$video_link = get_field('video-link');
$text = get_field('text');
?>

<section class="iframe-banner d-flex flex-column justify-content-center">
    <h2><?php echo $text; ?></h2>
    <div class="iframe-container">
        <iframe id="heroIframe" src="<?php echo $link['url']; ?>" allowfullscreen></iframe>
    </div>
</section>

<script>
    // works partially
    function adjustIframeHeight() {
        // Get the header element
        const header = document.querySelector(".header");

        // Get the header height dynamically
        const navHeight = header.offsetHeight;

        // Calculate the available height for the iframe
        const availableHeight = window.innerHeight - navHeight;

        // Set the iframe height
        const heroIframe = document.getElementById("heroIframe");

        // Check the window width and adjust the iframe height accordingly
        if (window.innerWidth > 767.98) {
            heroIframe.style.height = availableHeight + "px";
        } else {
            heroIframe.style.height = "100vh";
        }
    }

    // Adjust the iframe height on initial load
    adjustIframeHeight();
    const showHeaderAnim = gsap.timeline({
            paused: true
        })
        .from('.header', {
            yPercent: -210,
            duration: 0.3,
        })
        .from('.iframe-banner', {
            top: '-128px',
            duration: 0.3,
        }, 0); // Adding the animation to the same timeline at position 0

    showHeaderAnim.progress(1);

    ScrollTrigger.create({
        start: 'top top',
        onUpdate: (self) => {
            self.direction === -1 ? showHeaderAnim.play() : showHeaderAnim.reverse();
        }
    });
</script>

image with videoFoam=true image without videoFoam=true

I tried to remove the videoFoam attribute and set the height myself which worked but it has black screen around it.

So my desire is to show the whole video without screencut off and without the black screen. is there any way i can have the videoFoam attribute to remove the blackscreen and also set the height myself based on the parent div ?