我正在使用自定义插件在WordPress中创建一个自定义Elementor小部件，我的问题是，当我将小部件添加到我的页面时，它溢出了它的容器。
enter image description here
我的php/html代码：

<div id='video-wrapper'>
        <video id='custom-video' autoplay muted loop video-url='<?php echo(esc_url( $settings['video']['url'])); ?>' timebar='<?php echo $timebar ?>' volume='<?php echo $volume ?>'>
            <source src="<?php echo(esc_url( $settings['video-background']['url'])); ?>" type="video/mp4">
            <source src="<?php echo(esc_url( $settings['video-background']['url'])); ?>" type="video/ogg">
            <source src="<?php echo(esc_url( $settings['video-background']['url'])); ?>" type="video/mvk">
            Your browser does not support the video tag.
        </video>
        <div id='timebar'></div>
        <div id='custom-video-volume-wrapper'>
            <svg viewBox="0 0 154 234" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M11.6392 172.687H52.1515L134.313 231.478C142.337 237.219 153.492 231.483 153.492 221.616V12.1476C153.492 2.24405 142.264 -3.48304 134.249 2.33204L53.8752 60.6426H11.6392C5.21104 60.6426 0 65.8544 0 72.2836V161.046C0 167.475 5.21104 172.687 11.6392 172.687ZM130.092 34.2078L67.8952 78.8923V155.444L130.092 199.607V34.2078ZM45.1018 83.9246H23.7633V149.89H45.1018V83.9246Z"/>
            </svg>

            <input id='custom-video-volume' type='range' min='0' max='100' step='1' value='50'></input>
        </div>
        <div id='custom-video-popup'>
            <span>Seu vídeo já começou</span>
            <svg viewBox="0 0 250 234" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M11.6392 172.687H52.1515L134.313 231.478C142.337 237.219 153.492 231.483 153.492 221.616V12.1476C153.492 2.24406 142.264 -3.48304 134.249 2.33204L53.8752 60.6426H11.6392C5.21104 60.6426 0 65.8544 0 72.2836V161.046C0 167.475 5.21104 172.687 11.6392 172.687ZM130.092 34.2078L67.8952 78.8924V155.444L130.092 199.607V34.2078ZM45.1018 83.9246H23.7633V149.89H45.1018V83.9246ZM246.591 86.3641C251.136 90.9102 251.136 98.2809 246.591 102.827L232.391 117.029L246.591 131.23C251.136 135.777 251.136 143.147 246.591 147.693C242.046 152.239 234.676 152.239 230.131 147.693L215.931 133.492L201.732 147.693C197.186 152.239 189.817 152.239 185.271 147.693C180.726 143.147 180.726 135.777 185.271 131.23L199.471 117.029L185.271 102.827C180.726 98.2809 180.726 90.9102 185.271 86.3641C189.817 81.818 197.186 81.818 201.732 86.3641L215.931 100.566L230.131 86.3641C234.676 81.818 242.046 81.818 246.591 86.3641Z" fill="black"/>
            </svg>

            <span>Clique para ouvir</span>
        </div>
    </div>

/* VOLUME  */

#custom-video-volume-wrapper {
    position: absolute;
    bottom: 1rem;
    right: 1rem;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

#custom-video-volume-wrapper.active {
    display: flex;
}

#custom-video-volume-wrapper svg {
    width: 1rem;
    height: 1rem;

    margin-right: .25rem;

    fill: crimson;
}

input[type=range] {
    -webkit-appearance: none;
    background-color: silver;
    width: 8rem;
    height: .5rem;
    border-radius: .25rem;
}

input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
    background-color: crimson;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;

    cursor: pointer;
}

/* TIMEBAR  */

#timebar {
    width: 100%;
    max-width: 0%;
    height: .5rem;

    background-color: crimson;

    animation-duration: 30s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

#timebar.animate {
    animation-name: grow;
}

#timebar.pause {
    animation-play-state: paused;
}

/* VIDEO  */

video {
    width: 100%;
    
    cursor: pointer;
}

#video-wrapper {
    position: absolute;

    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;

    position: absolute;

    width: 100%;
    /*min-height: 15rem*/
}

/* POPUP */

#custom-video-popup {
    position: absolute;
    top: calc(50% - 5rem);
    left: calc(50% - 7rem);

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    width: 14rem;
    height: 10rem;

    border-radius: 2rem;

    color: #000;
    background-color: crimson;

    opacity: .75;
    cursor: pointer;

    transition: transform .3s ease;
}

#custom-video-popup.deactivated {
    display: none;
}

#custom-video-popup:hover {
    transform: scale(1.05);
}

#custom-video-popup span {
    color: #000;

    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: bold;
}

#custom-video-popup svg {
    width: 3rem;

    margin: 1rem 0;
}

@keyframes grow {
    0% {
        max-width: 0%;
    }

    30% {
        max-width: 50%;
    }

    70% {
        max-width: 75%;
    }

    100% {
        max-width: 100%;
    }
}

@keyframes grow2 {
    0% {
        max-width: 0%;
    }

    30% {
        max-width: 50%;
    }

    70% {
        max-width: 75%;
    }

    100% {
        max-width: 100%;
    }
}

我试过添加一个块显示的 Package 器，但是没有太大的帮助。我想保留我的项的display-flex。我希望容器不会溢出，而是自动调整容器高度。
你知道是什么导致了这个问题吗？