在 wistia 视频中使用 videoFoam=true 无法控制视频高度

问：

我正在尝试使用 wistia 嵌入视频。我遇到的问题是，脚本中有一个属性 videoFoam = true，它根据屏幕宽度处理视频的响应，它设置了视频的高度。 但是以我目前的风格，如果我使用 videoFoam 属性，它会切断视频的一部分，这是不可取的，如果我删除 videoFoam = true，那么我们可以根据父级的可用高度看到视频，但它在视频的两侧添加黑屏以填补空白。

来自 Inspect 元素的 IFRAMLink 的代码 scnippet。 如果您访问该网站 https://sensxpert.dev5.yoyaba（dot）tech/home-new/ [我添加了 （dot），以便 stackoverflow 不要丢弃此链接]

<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>

带有 videoFoam=true 的图像 没有 videoFoam=true 的图像

我尝试删除 videoFoam 属性并自己设置高度，这有效，但它周围有黑屏。

所以我的愿望是在不截屏和没有黑屏的情况下显示整个视频。 有什么方法可以让 videoFoam 属性删除黑屏并根据父 div 自己设置高度？