Refresh Theme Adjusted Video Size - Blank Space

[fred2107]

Hi,

I am using the Refresh theme 11 for Shopify and had initially the problem that my implemented videos were shown too large at Desktop browsers. Then, I fixed the video sizes for desktop with this code and added it too video-section.css:

@media screen and (min-width: 1024px) {
        .video-section__media {
        position: relative; /* Stellt sicher, dass das absolute Kind (Video) richtig positioniert ist */
    }
  .video-section__poster,
  .video-section__media video {
        position: absolute; /* Absolut positioniert innerhalb des .video-section__media Containers */
        width: 50%; /* Oder die gewünschte Breite */
        height: 50%; /* Höhe passt sich proportional an */
        left: 50%; /* Setzt den linken Rand des Videos in die Mitte des Containers */
        transform: translateX(-50%); /* Verschiebt das Video um die Hälfte seiner Breite zurück, um es zu zentrieren */
        top: 0; /* Optional, setzt das Video an den oberen Rand des Containers */
    }
}

Then, I’ve also added this code to component-deferred-media.css:

@media screen and (min-width: 1024px) {
  .deferred-media__poster {
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin: 0;
  padding: 0;
  height: 50%;
  width: 50%;
  overflow: hidden;
  border-radius: calc(var(--border-radius) - var(--border-width));
}

Now, the poster and video size is fine, but

BELOW the video is a huge blank space:

How can I fix the blank space?

Best and huge thanks!

Fred