Problem with container in Wordpress custom Widget - php

Question

I'm creating a custom Elementor widget in WordPress using a custom plugin, my problem is that when I add the widget to my page it overflows it's container.
See problem here
My php/html code:
<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%;
}
}
I've tried to add a wrapper with a display: block;, but it didn't help much. I would like to keep the display: flex; to my items. I was expecting that the container would not overflow, but automatically resize the containers height.
Any idea on what could be causing this problem?

Answer 1

Have you tried adding a wrapper with a position:relative; and a width of 100%?
I hope this helps!