video behind gif/png picture.

have a look : https://webers-testseite.de/video-behind-a-hole/
but a png will be very performance intensive on that.
this is a video alb in a color-section ( color-section with custom-class: hole-before )

 .hole-before .avia-iframe-wrap::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://webers-testseite.de/wp-content/uploads/fire-hole-2908115.png);
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events:none
}

but nevertheless – the mobile versions will not work as expected-
so maybe then you do all that code in a media query with min-width

you do not see the video on top behind the png?
only on the bottom?
on my mac browsers ( firefox, safari, chrome) i can see it the way you want it.

first: if there is css code posted ? – on default the normal place to insert is quick css – you put it as ID ???

_______

A normal support of the team here should not really exceed the 10min. However, special requests are sometimes so complex that this time can not be kept here. – I do this on a whim, if I have time for it, and if it is an interesting question.
The approximation to your request should be sufficiently fulfilled with the following answer. I don’t feel like including the padding at the moment.

So the second of my example color sections has your video and a background graphic (your png) – both to be set as usual via the color section ALB element.

Please give the Color-Section the class: not-fullsize
and the following settings on alb element

The construction of the “background” is to go over the pseudo-container :after – which inherits the background of the color-section –
the section height has to be in relation to the video aspect ratio.

.avia-section.not-fullsize {
  background-size: 0;
  height: 56.25vw
}

.not-fullsize .avia-slideshow {
    width: 100%;
    max-width: 1410px;
    margin: 0 auto !important;
}

.avia-section.not-fullsize::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit !important;
    background-repeat: no-repeat;
    z-index: 5 !important;
    will-change: transform;
    pointer-events: none;
}

@media only screen and (min-width: 1410px){
    .avia-section.not-fullsize::after {
        background-size: 1410px 793px;
        background-position: center center;
    }
    .not-fullsize .avia-slideshow,
    .avia-section.not-fullsize {
        height: 793px !important
    }
}

@media only screen and (max-width: 1409px){
  .avia-section.not-fullsize::after {
    background-size: 100vw 56.25vw;
    background-position: center center;
  }
}

see again: https://webers-testseite.de/video-behind-a-hole/

you had to adjust the value of 1410px to your needs
my test page got 1510px and a padding of 50px left right. so a normal container width of the 1/1 container would be 1410px

if the video got the 16:9 aspect-ratio
for screens >= 1410px a video-width of 1410px so the height is : 1410*9/16 = 793px
for screens <= 1409px the video-width is 100vw (100% videoscreen-width) the height is then = 56.25vw

if your width is 1920px the height had to be : 1080px ( 1920 x 9 / 16 )
and mediaquerries switch point must be adjusted too.

so it had to be instead:

.avia-section.not-fullsize {
  background-size: 0;
  height: 56.25vw
}

.not-fullsize .avia-slideshow {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto !important;
}

.avia-section.not-fullsize::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit !important;
    background-repeat: no-repeat;
    z-index: 5 !important;
    will-change: transform;
    pointer-events: none;
}

@media only screen and (min-width: 1920px){
    .avia-section.not-fullsize::after {
        background-size: 1920px 1080px;
        background-position: center center;
    }
    .not-fullsize .avia-slideshow,
    .avia-section.not-fullsize {
        height: 1080px !important;
    }
}

@media only screen and (max-width: 1919px){
  .avia-section.not-fullsize::after {
    background-size: 100vw 56.25vw;
    background-position: center center;
  }
}

dear Ingo, what please is so hard about copy&paste? https://kriesi.at/support/topic/video-behind-gif-png-picture/#post-1289654
If I copy my code from above and paste it into the developer tools as css it is as you want it. Why are things forgotten to take over?

where is the background-size = 0 on the color-section ? (.avia-section.not-fullsize )
where is the :after rule on the color-section ? ( .avia-section.not-fullsize::after )

does not matter