But you are talking about a background-video with audio?
For me, as background these videos are muted and can be played automatically, except on a mobile device – but this is not an Enfold setting – it is a browser-dependent agreement not to unnecessarily increase traffic nor power-consumption from mobile phones.

so – you can try to force muted by adding playerparameters
on youtube for example:

?autoplay=1&mute=1&playsinline=1

so the inserted video is for example:
https://www.youtube.com/watch?v=81hhkBaIvNM?autoplay=1&mute=1&playsinline=1

by the way – if you have set a loop for the youtube video – then the ID had to be added as playlist:
&playlist=81hhkBaIvNM
but the parameter “playlist” seems to be removed by Enfold at data-original_url for data-videoid

See: https://webers-testseite.de/youtube-background/
Password is : Enfold

but nevertheless – it seems to work on f.e. ipad

there are pages that use a slightly different snippet – if the last snippet is not what you want.
I think it’s more accurate what is allowed to be displayed in the search results:
( of course – such snippets are intended for the child-theme functions.php. )

add_filter( 'pre_get_posts', function( $query ) {
global $woocommerce;

  if ( ! is_admin() && $query->is_search && isset( $query->query_vars['s'])){
  $query->set( 'post_type', 'product' );
  $query->set( 'wc_query', 'product_query' );

  $tax_query = $query->get( 'tax_query' ) ?: [];
  $tax_query[] =  [
                  'taxonomy' => 'product_visibility',
                  'field' => 'slug',
                  'terms' => 'exclude-from-search',
                  'operator' => 'NOT IN'
                  ];

  $query->set( 'tax_query', $tax_query );
  }
  return $query;
});

have you tried the test the other way round?
disable siteground optimizer and activate “use minified …”

Clear all cachings before you deactivate siteground optimizer – i think that tool comes with a caching addon.

merge all css an js means – combine all css and js in one file each. I guess that this is what a lot of optimization tools do too.
Now Enfold offers the usage of minified Versions of their core files. That seems to be a better way. Especially for TTBF (time to first byte)

you can do it that way too – with 5 iconboxes inside one 1/1 column.
css code on that page:
https://webers-testseite.de/iconboxes2/

go to the editor and open the first 1/3 column – you can find there on “Row Margins” : custom margins – and a negative value.
the whole column line is now shiftet to top by that amount ( 60px). For the effect to make sense, they will have a higher z-index, overlapping your heading.

If you like to preserve that behaviour – pull your Heading into a 1/1 container and shift this to top. And get rid of the settings on your first 1/3 column. To obtain this looking i guess there is a no “Space Between Columns” defined.

the columns are the same height – but you do not see it. What you see is the icon-box background – and the height of them is different due to content amount.
You can see here what the crux is: https://webers-testseite.de/equal-height/ – look to the bottom columns.

maybe you decide to not use the iconbox – but: https://webers-testseite.de/iconboxes/

give a unique ID to your color-section – here in my case it was: randomized
this is for only one page of mine so there is the is_page conditional.
upload the images via ftp into a given folder ( here it is a folder on uploads-folder: random-images
then put only the image-filenames into the array.

function randomize_bg_image() {
if(is_page(34024)){ 
?>
<script type="text/javascript">
(function($){
	    var images = ['o2-7.jpg', 'o2-1.jpg', 'o2-2.jpg', 'o2-3.jpg', 'o2-4.jpg', 'o2-5.jpg', 'o2-6.jpg'];
	    $('#randomized').css({
	    	'background-image': 'url(/wp-content/uploads/random-images/' + images[Math.floor(Math.random() * images.length)] + ')'
	    });
})(jQuery);
</script>
<?php
}
}
add_action( 'wp_footer', 'randomize_bg_image' );

see: https://webers-testseite.de/bg-scheduling/

I would upload an unspectacular iconfont. Here I have inverted numbers. Link

Then upload your coloured icons and make a note of the path for each icon.
now replace an icon of this font with the noted links of your coloured icons

this comes to your quick css:

.av_font_icon {
    overflow: visible !important;
}

[data-av_iconfont="solar-icons"]  {
  content: " ";
  background-size: 100px;    
  background-position: center center;
  background-repeat: no-repeat;
  border: none !important;
  color: transparent !important;
}

[data-av_iconfont="solar-icons"][data-av_icon="\e800"]{background-image: url(/wp-content/uploads/globe.gif) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e801"]{background-image: url(/wp-content/uploads/broken-spheres.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e802"]{background-image: url(/wp-content/uploads/bubbles.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e803"]{background-image: url(/wp-content/uploads/chrome-balls.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e804"]{background-image: url(/wp-content/uploads/film.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e805"]{background-image: url(/wp-content/uploads/glas-dots.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e806"]{background-image: url(/wp-content/uploads/glas-waben.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e807"]{background-image: url(/wp-content/uploads/green-world.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e808"]{background-image: url(/wp-content/uploads/home.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e809"]{background-image: url(/wp-content/uploads/hui.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e80a"]{background-image: url(/wp-content/uploads/lotus.svg) !important}
[data-av_iconfont="solar-icons"][data-av_icon="\e80b"]{background-image: url(/wp-content/uploads/nachhaltig1.svg) !important}

Now – if you place your circled number 1 – you can see even in preview – the replaced colored icon:
And – yes even animated gifs can be inserted:

see replaced first icon : https://webers-testseite.de/abc/

PS: on that page with the snippets – you can see that i use the elements sizes for the icons – to generate the background-size :
https://enfold.webers-webdesign.de/colorized-font-icons/

if you like to use that too – remove from css code above the background-size line

function transfer_fontsize_to_backgroundsize(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
(function($) {     
	$('.av-icon-char[data-av_iconfont="solar-icons"], .iconbox_icon[data-av_iconfont="solar-icons"]').each(function() {
		var iconLineHeight = parseInt($(this).css('line-height'));
		var iconPadding = parseInt($(this).css('padding'));
		$(this).css('background-size', (iconLineHeight + 2*(iconPadding))+'px');
	});
})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'transfer_fontsize_to_backgroundsize');

and please think of since jQuery 3 the (window).load( is deprecated – it is now : (window).on('load',
( purely cosmetic – I personally prefer to write all jQuery as $ – and redeclare it by wrapping it in a jQuery function. )

function av_move_search(){
?>
<script type="text/javascript">
(function($){
	$(window).on('load', function(){
		$('#menu-item-search').detach().appendTo('#header_meta .sub_menu ul');
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'av_move_search');

by the way: your cloudflare security blocks your website (on all of my browser – even on those where i do not run µBlock or private window only.

hyphens: auto will break words with a dash : Link
see on “can i use” the support for hyphens auto: https://caniuse.com/mdn-css_properties_hyphens_auto

you can use ismaels css in combination with hyphens

#main li {
   word-wrap: break-word;
   overflow-wrap: break-word;
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
}

No – I only “think” out loud.
As I understand it, only the order in which they are looped is different – how to solve this?

That was three years ago – but I think it works so far. Maybe I would do some things differently now.

Thanks – Mike – I forgot to mention that the coloured icons have to be uploaded to the media library

PS – you can drag&drop the colored icons to fontello – in most cases they will generate a monocolor version of it.

if you can download as svg – you can upload that to fontello.com
Using it as an iconfont it has to be not multicolored. the svg path’s had to be compound path.

Follow Mikes Link

And a little bit under Mike’s link there are the enfold fonticons used for their demos to download
https://kriesi.at/documentation/enfold/icon/#download-fontello-or-flaticon-icons-included-in-enfold-demos