can you try this solution: https://kriesi.at/support/topic/portfolio-items-on-click-navigagte-to-external-website/

but i guess it is only for portfolios …

see the comment:

Link portfolio item to external URL
You can add a link to any (external) page here.
If you add a link to a video that video will open in a lightbox

… for posts you then had to set the format to “link”

see – example page: https://webers-testseite.de/vimeo-bg-video/

as long the parameter muted is set – it will autoplay on mobile iOS devices.

Thanks for digging into this for me. I can see that works but the odd thing is that this is the same setup as this website and we use that plugin with no issues.

See if there are different settings for that plugin – the pf-content div wraps all content inside #main. On the working page not!

F.e. on “Select content using”

see: https://support.printfriendly.com/wordpress/customize-content-selection/

where does that “div.pf-content” comes from. It is a wrapper that does not exist in the working constallation.

the sidebar is not inside the div.container ( child ) – it is a sibling of that container
so div.container has closed to early. I do not know why it is happening on the one page. Try to rebuild that page – maybe just duplicate the page and have a look if that new page shows the same behaviour.

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;
}