hm i did not try that because in class-avia-slideshow.php this parameter is missing on the array:

$video_data = apply_filters( 'avf_youtube_video_data', array(
	'autoplay' 		=> 0,
	'videoid'		=> $video_id,
	'hd'			=> 1,
	'rel'			=> 0,
	'wmode'			=> 'opaque',
	'loop'			=> 0,
	'version'		=> 3,
	'autohide'		=> 1,
	'color'			=> 'white',
	'controls'		=> $controls,
	'iv_load_policy'=> 3
));

but: as always, it only works muted.
Thanks Ismael – i will keep that snippet in mind. btw: then you can set an end time too:

add_filter( 'avf_youtube_video_data', function( $data ) {
    if( !empty( $data['videoid'] ) && $data['videoid'] === 'G0k3kHtyoqc' ) {
        $data['start'] = 15;
	$data['end'] = 40;
    }
    return $data;
});

However, the video behaves this way only when first called up. Once the slideshow has run through its first cycle, these settings are no longer taken into account. Furthermore, if you have selected autoplay, the video will be interrupted after the slider autorotation duration and the next slide will be called up.

you can insert to that input field:

<iframe src="https://www.youtube.com/embed/grA5XmBRC6g?start=50&autoplay=1&mute=1" frameborder="0" allowfullscreen></iframe>

but to have autoplay – you have to mute it
yes the whole iframe code works. without the mute=1 it will wait until you click the start button (then with sound)

But that’s not really a good solution. Because the video doesn’t start again when you autorotate to that slide again.

if you like to have the pipes between the links:
adjust the new switch point when the links goto a twoliner:

@media only screen and (max-width: 467px) {
  #header {
    height: 160px !important;
    max-height: 160px !important;
  }
  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 160px !important;
  }
} 

and for phone-info:

/******  styling the phone-info links with pipe separator  *************/
#top #header_meta .phone-info {
  display: flex;
  flex-flow: row wrap;
  gap: 0 40px; 
}

#top #header_meta .phone-info a {
  flex:  1 1 auto;
  position: relative;
}

#top #header_meta .phone-info a:not(:last-child)::after {
  content: '|';
  font-size: 18px;
  position: absolute;
  right: -24px; 
  color: #FFF;
}

There is a lot more to think of.
First – to style the header_meta with your phone-info entries.
To prevent breaks occurring where it looks unsightly, it would be a good idea to replace your entries completely with this line:

<a style="white-space: nowrap" href="/over-ons/">Over Ons</a><a style="white-space: nowrap" href="/veelgestelde-vragen/">Veel gestelde vragen</a><a style="white-space: nowrap" href="#">Nieuws</a><a style="white-space: nowrap" href="tel:+31434551268">T: +31 (0)43 455 12 68</a>

after that we will see if the pipes are neccessary.

On mobile devices, these links become two lines—and this must also be taken into account with the padding-top of main.

After you have these new phone-info – remove your code from above and try:

@media only screen and (max-width: 989px) {
  .responsive #top #wrap_all #header .container {
    width: 95%;
    max-width: 95%;
  }

  #header {
    position: fixed !important;
    height: 110px !important;
    max-height: 110px !important;
  }

  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 110px !important;
  }

  #top #header.av_header_transparency #header_meta {
    background-color: transparent;
  }

  #header_main {
    border-bottom: none;
  }

  #header:not(.av_header_transparency) #header_main {
    box-shadow: 0 5px 10px #eee;
  }

  .responsive #top .av-logo-container ,
  .responsive #top .logo a,
  .responsive #top .logo img,
  .responsive #top .logo svg {
    height: 80px !important;
    max-height: 80px !important;
    line-height: 80px !important;
  }

  .responsive #top #avia-menu > .menu-item-avia-special > a {
    height: 80px !important;  ;
    line-height: 80px !important; 
  }

  .responsive.html_mobile_menu_tablet #top #wrap_all .av_header_transparency {
    background-color: transparent !important;
  }

  .responsive #top .header_bg {
    opacity: 1;
    filter: alpha(opacity=100);
    background-color: #FFF !important;
  }  

  #top #header:not(.av_header_transparency) .header_bg {
    background-color: #FFF !important;
  }

  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo img.alternate, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency .logo .subtext.avia-svg-logo-sub {
    display: block !important;
  }

  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > img, 
  .responsive.html_mobile_menu_tablet #top .av_header_transparency.av_alternate_logo_active .logo a > svg {
    opacity: 0;
  }

  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::before, 
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency div .av-hamburger-inner::after {
    background-color: #FFF;
  }
  .html_mobile_menu_tablet .header_color  #header.av_header_transparency .menu-item-search a:before {
    color: #FFF;
  }
}

@media only screen and (max-width: 767px) {
  #header {
    position: fixed !important;
    height: 140px !important;
    max-height: 140px !important;
  }

  .responsive.html_header_top.html_mobile_menu_tablet #top #main {
    padding-top: 140px !important;
  }
}

@media only screen and (max-width: 435px) {
  #header {
    position: fixed !important;
    height: 160px !important;
    max-height: 160px !important;
  }
  .responsive.html_header_top.html_mobile_menu_tablet  #top #main {
    padding-top: 160px !important;
  }
} 
/****** End *************/

/******  styling the phone-info links  *************/
#top #header_meta .phone-info {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  gap: 0 30px;
}

And you don’t like to make it public? Perhaps other participants could also benefit from this.
Is it nearby my approach on: https://kriesi.at/support/topic/restricted-product-displaying-in-search-results/#post-1491770

My guess is that WP Rocket is interfering again. I can’t see the font (or the arrows) with your code either, Ismael.

try to insert mine for testing.

the section is set to alternate_color and this is in your system set to :
.alternate_color { color: var(–enfold-alternate-color-color) }
and this is on your setting #000

so this :

#top .av_inherit_color * {
  color: inherit;
}

will cause the font to be color: #000

i do not see where your code misses some settings:
f.e. where does this comes from?

#top .av_inherit_color * {
  color: inherit;
}

try in your quick css:

#top .av-large-testimonial-slider .avia-testimonial_inner {
    display: inline-table;
}

#top .av-large-testimonial-slider .avia-testimonial_inner * {
  color: #FFF;
}

#top .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a {
  color: #FFF;
  opacity: 1 !important;
}

#top .alternate_color .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a.avia-svg-icon svg:first-child {
  fill: #FFF !important;
  opacity: 0.5;
}

#top .alternate_color .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a.avia-svg-icon:hover svg:first-child {
  opacity: 1
}

Give your visitors a bit more time to read the testimonial – ( autorotation is to fast )

__________
btw:
you entered the custom class with a dot on Link
Enter it without
nevertheless it is added correctly to avia-testimonial-wrapper

Hi,

I’m trying to do the same thing, but when I add the new code, there are no longer icons before the email adddress and the phone number, which I would like. Here’s the code I added, using your suggestions above:

Enfold Theme Options > Header > Extra Elements > Phone Number Or Small Info Text:

(Email address hidden if logged out) “> (Email address hidden if logged out)
941-462-9082

Custom CSS:

/* Phone info */
.phone-info-top {
display:inline-block!important;
padding:4px 10px;
}

I would like the icons before the email (ue805) and phone (ue854) – and I would like them to be a different color than the text, like this site: https://www.coastlinetree.com/

How can I accomplish this?

Thank you so much!