if you got different content height the arrows will adjust because of 50% position – maybe it is best to have an absolute value for the top position.
Next i think they should not lay over content
Because the demo ( Link ) only got smallarrow setting and no headings – this is a interims solution:

#top .avia-smallarrow-slider-heading {
  height: 100%;
  position: absolute;
}

#top .avia-smallarrow-slider .avia-slideshow-arrows {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3
}

#top .avia-smallarrow-slider .avia-slideshow-arrows .prev-slide {
  left: -35px
}

#top .avia-smallarrow-slider .avia-slideshow-arrows .next-slide {
  right: -35px
}

i guess – as the frames – it will be better for positioning to choose display : fixed
I don’t know how the vw unit reacts to the scroll bar thickness. However, it seems to be the case that this must unfortunately be taken into account. For this reason alone, it is important to align all four pseudo containers to the top left.
for the mentioned Demo this works in all browser i do have on my Mac (FF dev, FF, Safari, Chrome)

.av-frame:before,
.av-frame:after {
    pointer-events: none;
    display:block !important;
}

.av-frame.av-frame-top.av-frame-vert:before {
    content: '';
    left: 30px;
    top: 30px;
    height: calc(50vh - 30px);
    width: calc(50vw - 38px);
    border-top: 1px solid #102f5d !important;
    border-left: 1px solid #102f5d !important;
    position: fixed;
}
.av-frame.av-frame-right.av-frame-hor:before {
    content: '';
    left: calc(50vw - 8px);
    top: 30px;
    height: calc(50vh - 30px);
    width: calc(50vw - 38px);
    border-right: 1px solid #102f5d !important;
    border-top: 1px solid #102f5d !important;
    position: fixed;
}
.av-frame.av-frame-bottom.av-frame-vert:before {
    content: '';
    left: calc(50vw - 8px);
    top: 50vh;
    height: calc(50vh - 30px);
    width: calc(50vw - 38px);
    border-right: 1px solid #102f5d !important;
    border-bottom: 1px solid #102f5d !important;
    position: fixed;
}
.av-frame.av-frame-left.av-frame-hor:before {
    content: '';
    left: 30px;
    top: 50vh;
    height: calc(50vh - 30px);
    width: calc(50vw - 38px);
    border-left: 1px solid #102f5d !important;
    border-bottom: 1px solid #102f5d !important;
    position: fixed;
}

if you got a different frame width than 10px we had to adjust some settings.

add to your css of first post :

.av-frame:before,
.av-frame:after {
  pointer-events: none;
}

i do not see your site – but with the demo : “Enfold Hotel” i made some tests in dev tools.
There is always a shift of bottom lines. Some browsers have that border/height 1px difference – so mybe it would be better to position all in relation to the top position.

@strumpumpel:

Guenni007 so great for your fast help!
Arrr … i don’t usede the code tag …. :(
Sorry total!
Bist Du Deutscher?

Ja – der andere Beitrag ist schon zu.

btw. if you use on your landing page the advanced layer slider element – it is hard to get good loadiing times.
not least because the slider needs to be time-controlled to load the content. That’s the point behind it. So if you see my test page, the slider is set to show the entire content after approx. 7 seconds.

if you got an advanced layerslider on your landing page – then it might be usefull to play a bit with the advanced layerslider performance settings:
there is on “layerslider first window” on top right a gear icon which opens the settings dialog for gloabl settings of layerslider.
If you have opend one slider – you got on the top left “Project Settings” here are the performance settings for the specified slider.

i answered to the other topic: https://kriesi.at/support/topic/adding-google-tag-manager-in-enfold/

well – put your code block just inside a color-section – that color section set custom class to: special-vids
inside you got your html structure like:

<section id="scrubs" class="vid">
	<div class="holder">
		<video src="/wp-content/uploads/Time-Lapse.mp4" autoplay muted loop playsinline></video>
	</div>

	<div class="story">
		<div>
			<h3>In the heart of Wildrise…</h3>
		</div>
		<div>
			<h3>…where the breezes play.</h3>
		</div>
		<div>
			<h3>We embrace the call of the wild each day.</h3>
		</div>
		<div>
			<h3>Untamed places stretch,</h3>
		</div>
		<div>
			<h3>vast and wide.</h3>
		</div>
		<div>
			<h3>Whispering secrets of a world outside.</h3>
		</div>
	</div>
</section>

put this to your child-theme functions.php:

function scrub_preparation_of_color_section() { 
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
	(function($){
		$('.avia-section.special-vids ').each(function() {
			var vids = $(this).find('.vid').detach().html();
			$(vids).prependTo($(this));
			$(this).addClass('vid').find('.container').remove();
		});
	})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'scrub_preparation_of_color_section');

see: https://webers-testseite.de/scrubbing-videos/

my css on that page is:

.responsive body#top {
    overflow-x: visible;
}

#wrap_all {
    overflow: visible;
}

.avia-section.vid {
  height: 600vh;
  position: relative;
}

.avia-section.vid div.holder {
  position: sticky;
  top: var(--enfold-header-height);
}

.avia-section.vid video {
  width: 100%;
  height: 100vh;
  object-fit: cover !important;
}

.avia-section.vid div.story {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.avia-section.vid div.story div {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

but i do not want to style it till the end. have a look how that is made in that video. – and how to handle the other .avia-section
Edit: you had to adopt now the scrubbing script to its selectors. And perhaps a debounce and resize will be needed.

you can use the embedded debounce function of enfold:

function ava_add_custom_script(){
?>
<script>
(function($){
  function b() {
      // here comes the script …
  }

  $(window).on('debouncedresize', function() {
    b();
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_add_custom_script');

Can you please post the code you like to insert? Where did you see that effect you like to reproduce?
And where do you like to insert it – as first child in #main or between other alb elements?

why do i ask this: if it is first child inside #main you can use that filter: ava_after_main_title

f.e.:

add_action('ava_after_main_title', function() {
	if ( is_page(49162)){
		echo '<section class="vid">';
		echo '<div class="holder">';
		echo '<video class=" " preload="metadata" autoplay=" " muted=" " playsinline=" " loop=" " controls=" " id="player_27_1266727400_788445252_html5" src="/wp-content/uploads/Time-Lapse.mp4"></video>';
		echo '</div>';
		echo '</section>';
	}
});

see: https://webers-testseite.de/no-wrappers/