Perhaps the developers should set this setting to this value (“Block and Hide reset all options button”) by default after Enfold Activation. Too many people have accidentally pressed this button despite a warning pop-up.

Where can we inspect that issue?
– ok i found your page tabijapon –
do you have a webp plugin installed? if i place an image element with enfold only and set the animation to “slightly zoom the image” – i do not have these bars.
Now i try to find out where it comes from…

or – if you only miss those icons – you can find them in the docu as downloadable zip files : https://kriesi.at/documentation/enfold/icon/#download-fontello-or-flaticon-icons-included-in-enfold-demos

for medical : https://kriesi.at/documentation/enfold/wp-content/uploads/sites/22/2022/08/medical.zip

Edit: here is the solution with working separators on those color-sections

the color-section that should react like this:
give a custom class to it: av-video-section
give a background-color to it that does not disturb your video switch (not white – something that fits to your video content
place a codeblock element on top of your color-section ( codeblock to content – not as codesnippet)

<video class="responsive-background-video" 
        autoplay muted loop playsinline
        data-video-mobile="path/to/mobile.mp4"
        data-video-desktop="path/to/desktop.mp4">
    <source src="" type="video/mp4">
</video>

this to your quick css:

.responsive #top #wrap_all .avia-section.av-video-section {
  position: relative;
  overflow: hidden; 
  min-height: initial; /* taken from Enfold section setting  */
}
.responsive #top #wrap_all .avia-section.av-video-section .container {
  position: relative;
  z-index: 1;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}  
.responsive #top #wrap_all .avia-section.av-video-section .responsive-background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  z-index: 0;
  min-height: inherit; /* transfer from Enfold section setting  */
}
.responsive #top #wrap_all .avia-section.av-video-section .avia-divider-svg {
  z-index:2;
}
.responsive #top #wrap_all .avia-section.av-video-section .avia-divider-svg.avia-to-front {
  z-index:100;
}

the snippet for child-theme functions.php

function custom_responsive_background_video_script() {
?>
<script>
(function($) {
    "use strict";

    $(document).ready(function() {
        $('.responsive-background-video').each(function() {
            const video = this;
            const $video = $(video);
            const source = video.querySelector('source');
            const win = $(window);
            
            // Get video paths from data attributes
            const mobileVideo = $video.data('video-mobile');
            const desktopVideo = $video.data('video-desktop');
            
            if (!mobileVideo || !desktopVideo) return;
            
            function updateVideoSource() {
                const isMobile = win.width() < 768;
                const newSrc = isMobile ? mobileVideo : desktopVideo;
                
                if (source.src.indexOf(newSrc) === -1) {
                    source.src = newSrc;
                    video.load();
                }
            }
            
            // Initial load
            updateVideoSource();
            
            // Resize handling
            win.on('debouncedresize', updateVideoSource);
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_responsive_background_video_script', 999);

see example page with divider : https://webers-testseite.de/background-video/

what you can do – ( not with enfold specific tools )!

do not set the background-image with enfold color-section settings.
put into the color-section on top a code-block element with this content
(adjust to your path and videos):

See Solution on next posts

Theory and practice: I cannot see any improvement in performance. Unfortunately.

i do not know if appending preload=auto can have a positive effect on that.

you can try to add to that page a preconnect to vimeo headers.

<link rel='preconnect' id='preconnect-vimeo-css'  href='https://player.vimeo.com' type='text/css' media='all' />
<link rel='preconnect' id='preconnect-vimeo-i-css'  href='https://i.vimeocdn.com' type='text/css' media='all' />
<link rel='preconnect' id='preconnect-vimeo-f-css'  href='https://f.vimeocdn.com' type='text/css' media='all' />

if this is GDPR compliant (DSGVO for our german spoken Participants – like me ) is a different question.
have a look at: https://ciffonedigital.com/video-backgrounds-wordpress-vimeo/

If the video file-size is not big – the best performance will be to self-host the video.

because you did not hamper to embed your sources to other sites – i can show the result on my page with your video:
https://webers-testseite.de/lara-video/

Once you have inspected it, I will replace the page with another video.

EDIT: i replaced now your video with a pexel video – i entered the aspect ration as mentioned above ( here in this case it is 1920:800)

@ismael – i guess that this rule belongs to the ruleset that should show the burger menu on larger screens than the settings of 768px or 990px :

@media only screen and (max-width: 1295px) {
    #top #header .av-main-nav > li.menu-item  {
        display: none!important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block!important;
    }
}

so i guess that amyedwards misses the icon in between that 990px and her 1295px
try:

@media only screen and (max-width: 1285px) {
  .responsive #top  .av-main-nav #menu-item-search.menu-item-avia-special {
    display: block;
  }
}

the only thing that is strange is that on my real mobile device (an iPhone) the fallbackimage is shown – but the link will not open. But thats only on a real mobile device.
Next if you let yout fingers on that button a few seconds (on iPhone) a context menu will open and on open in new tab will work. ???
on all browsers i can test on my OSX ( Firefox, Chrome, Safari, Opera) Desktop all is ok.

hm- on my testpage this is the case : https://webers-testseite.de/slider-with-permanent-caption/: second slide is a selfhosted video
Enfold 7.1.3 and newest WP

ok – i test now the fullscreen slider – if this will work too. …

same on fullscreen sliders on my end: https://webers-testseite.de/fullscreen-slider-with-permanent-caption/

what is a bit strange – it seems only be the fact if it is a self-hosted video.
i tested it with a youtube video – the button works !

if you switch off the video controls:
Hide Video Controls (Check if you want to hide the controls (works for youtube and self hosted videos) )

then the button is working

hm – didn’t i mention a solution before ? …

but take this instead from https://kriesi.at/support/topic/scroll-down-link/#post-1489662 – because we have choosen before this slightly rounded version :

function avia_replace_default_icons($icons){
 $icons['svg__scrolldown'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'down-open');
 $icons['svg__prev'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'left-open');
 $icons['svg__next'] =  array( 'font' =>'svg_entypo-fontello', 'icon' => 'right-open');
 return $icons;
}
add_filter('avf_default_icons','avia_replace_default_icons', 10, 1);

and try :

#top .avia-post-nav {
  padding: 20px;
}

#top .avia-post-nav .label {
  position:absolute;
  top:50% !important;
  transform: translateY(-50%);
  height:48px;
  margin-top:0;
}

.avia-post-nav .label.avia-svg-icon svg:first-child {
  fill: #FFF;
  height:48px;
  width: auto;
}

btw: you can have on opend slide-out a different fill color:

#top .avia-post-nav:hover .label.avia-svg-icon svg:first-child {
  fill: #eee
}

@media only screen and (min-width: 1010px) {
  /* your rulesets here */
}

@media only screen and (min-width: 990px) and (max-width: 1009px) {
  /* your rulesets here */
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  /* your rulesets here */
}

@media only screen and (max-width: 767px) {
  /* your rulesets here */
}

It is good practice (as Enfold also does) to use even values for the min-width and odd values for the max-width.

I tried but it won’t work so i need a code for this.

– i do not see what “this” means”
you should be more precise what you like to have – ” tablet and mobile etc” tablet and mobile are not well defined as screen width.
F.e. there are so many iPad versions (
iPad mini 768×102; iPad 800×1080; iPad 11inch 834×1194; iPad 12.9inch 1024×1366 etc. )
then there are different media queries for screen orientations ( portrait or landscape)
then there are different media queries for screen resolutions to differ between Retina Displays to normal one. etc. etc. pp
for example:

@media
  screen and (min-width:600px) and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-width:600px) and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {
  	/* an example rule: */
  	div {background:url( (Email address hidden if logged out) );}
}

Therefore, I would focus on a few screen widths, e.g., the 767px and 989px used by Enfold.
Incidentally, Enfold also uses various classes on the html tag that can be used to target only mobile devices (avia_mobile) or devices with touch screens (touch-device).

By the way: The link provided by Rikard leads to a more detailed page with my above-mentioned notes:
https://www.w3schools.com/css/css3_mediaqueries_ex.asp