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

What do you mean by ‘devices’ – there are no restrictions regarding different devices in the CSS rules above?
By the way, you should not set this for mobile devices, as it looks terrible (it is not easy to read with these settings).
f.e.:

/*Ajout de marges personnalisées dans les sections spécifiques de la page de résultats de recherche*/
@media only screen and (min-width: 768px) {
  .responsive #top.search #main .container {
    max-width: 100%;
  }

  .responsive #top.search #main .page-heading-container {
    max-width: 1310px !important;
    padding-right: 100px !important;
    padding-left: 100px !important;
  }

  .responsive #top.search #main .post-entry {
    margin-left: 100px !important;
    margin-right: 100px !important;
  }		
}

something like this:

.responsive #top.search #main .container {
  max-width: 100%;
}

.responsive #top.search #main .page-heading-container {
  max-width: 1310px !important;
  margin: 0 auto 50px;
  padding: 0 50px 50px;
}

.responsive #top.search #main .post-entry {
  margin-left: 50px;
  margin-right: 150px;
}

i can see both images on mobile ( dev tools setting ). So autoplay works on my end here
i did not check if real mobile device shows it.

choose your color-section and set for minimum height option your aspect-ratio in percent.
F.e. your image with 300/2000 means min-height 15%.
As long as your content inside your color-section does not grow bigger than the 15% height. The bg-image will react responsive, If you have set the bg-image is set to cover the background.

PS: for small screen you have to get rid of min-height option for color-sections (100px on default)

The name “masonry” actually implies the desire to fill the available space as best as possible. Depending on the settings (Flexible Masonry) , this can mean that for some screen widths, entries with large heights are better suited to a different location.

Despite the discontinuation of Sort Order the above setting, Masonry attempts to fill the entire area as well as possible.
This then leads that entries bigger in height, for example, being inserted differently after all.

If you try it with the “Perfect Grid” setting, that shouldn’t happen.

Thank goodness for DeepL — I did take French as my third subject in high school, but that was a good 40 years ago ;)

#top .ti-widget .ti-controls .ti-next,
#top .ti-widget .ti-controls .ti-next:after,
#top .ti-widget .ti-controls .ti-prev:after,
#top .ti-widget .ti-controls .ti-prev {
  background: none !important;
  border: none !important;
  outline: none !important;
}

#top .ti-widget .ti-controls .ti-next {
  right: -20px;
}

#top .ti-widget .ti-controls .ti-prev {
  left: -20px;
}

#top .ti-widget .ti-controls > div:after {
  font-size: 52px;
  color: #ebebeb;
}

#top .ti-widget .ti-controls .ti-prev:hover:after,
#top .ti-widget .ti-controls .ti-next:hover:after {
  color: #2c1175 !important;
}

maybe you have allready included some of those rules.

on inserting my code inside developer tools (copy&paste) :

there you can see both – mine and your existing jpg solution.

but where does a link like : https://storasoder.se/nojesteaterntestsida/richard-obriens-rocky-horror-show-the-legendary-rock-roll-musical/
come from – that is the link you must have set.

or a little more elegant:

#top #header:not(.header-scrolled-full) #header_main {
  box-shadow: none;
}

#header_main:before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--enfold-header-height) - 150px);
  width: 100%;
  height: 200px; 
  background-image:url("data:image/svg+xml;base64,PHN2ZyBpZD0iRHJlaS1MaW5pZW4iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgODAwIDE4MCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CgogICAgPHN0eWxlPgogICAgICAuc3QwIHsKICAgICAgICBmaWxsOiAjOTQxMDA5OwogICAgICB9CgogICAgICAuc3QxIHsKICAgICAgICBmaWxsOiAjZWZhNDBiOwogICAgICB9CgogICAgICAuc3QyIHsKICAgICAgICBmaWxsOiAjMDA4MGEyOwogICAgICB9CiAgICA8L3N0eWxlPgoKICA8cGF0aCBjbGFzcz0ic3QyIiBkPSJNNjE0Ljg4NSw2My44MzVjLTEwNS4xNzksMjUuNTMxLTI2NC44MDQsNTUuOTY1LTQyNy45NTQsNTUuOTY1LTEwMi4xMjcsMC0xNjAuOTctMTcuODkxLTE4Ni45MzEtMjguNTI5djE0Ljk5MWMyNS45NiwxMC42MzcsODQuODA0LDI4LjUyOSwxODYuOTMxLDI4LjUyOSwxNjMuMTUsMCwzMjIuNzc1LTMwLjQzNCw0MjcuOTU0LTU1Ljk2NSw5NS42MjYtMjMuMjEyLDE2NC43ODItNDYuNjc5LDE4NS4xMTUtNTMuODM1di0xNC45OTFjLTIwLjMzMyw3LjE1NS04OS40ODksMzAuNjIyLTE4NS4xMTUsNTMuODM1WiIvPgogIDxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik02MTQuODg1LDc4LjgyNWMtMTA1LjE3OSwyNS41MzEtMjY0LjgwNCw1NS45NjUtNDI3Ljk1NCw1NS45NjUtMTAyLjEyNywwLTE2MC45Ny0xNy44OTEtMTg2LjkzMS0yOC41Mjl2MTQuOTljMjUuOTYsMTAuNjM3LDg0LjgwNCwyOC41MjksMTg2LjkzMSwyOC41MjksMTYzLjE1LDAsMzIyLjc3NS0zMC40MzQsNDI3Ljk1NC01NS45NjUsOTUuNjI2LTIzLjIxMiwxNjQuNzgyLTQ2LjY3OSwxODUuMTE1LTUzLjgzNXYtMTQuOTljLTIwLjMzMyw3LjE1NS04OS40ODksMzAuNjIyLTE4NS4xMTUsNTMuODM1WiIvPgogIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik04MDAsMzkuOTgxYy0yMC4zMzMsNy4xNTUtODkuNDg5LDMwLjYyMi0xODUuMTE1LDUzLjgzNS0xMDUuMTc5LDI1LjUzMS0yNjQuODA0LDU1Ljk2NS00MjcuOTU0LDU1Ljk2NS0xMDIuMTI3LDAtMTYwLjk3LTE3Ljg5MS0xODYuOTMxLTI4LjUyOXYxNy4zMjZjMzAuMDc1LDExLjQ0Miw4OS4yMjgsMjcuMjAyLDE4Ni45MzEsMjcuMjAyLDE2NC44MjUsMCwzMjUuODg0LTMwLjcxMiw0MzEuOTcyLTU2LjQ3Niw4OS4wNC0yMS42MjQsMTU1LjM3LTQzLjQ5MiwxODEuMDk4LTUyLjM4MXYtMTYuOTQzWiIvPgo8L3N2Zz4=");
  background-size: 100% 100%;
  transition: opacity 1s ease-in-out;
}

#top #header.header-scrolled #header_main:before {
  opacity: 0;
}

svg with more convex look.