hm i can not reproduce your problems: https://webers-testseite.de/vimeo-embed/

The left one is enfold video alb.
And the right one is iframe ( but i prefered the responsive setting – on share button you can see options button on top right)

( That testpage is on Enfold 4.7.6.4 and WP5.5.1 )

have you set any Content Security Policy (CSP) or f.e. a plugin which has set it?
if you are familiar with developer tools have a look to the Console – if there are blocking rules on vimeo sources.

just to mention: if you got older additional font-icons in your import – the fontello page now generates the woff2 format too.
it could be solved by extracting the svg font file from your former upload zip file and drag and drop it into fontello page
“Drag custom SVG icons or SVG font here.”
activate all your wanted icons and then download it from fontello and upload that new zip file.

OK – i just asked because i can not reproduce the issue.
See the bottom of that page : https://webers-testseite.de/gallery/
This is a gallery with left jpg – right png.
Click to see the lightbox – allthough this is a big png – there is no darker corner. – no tear ( rupture, torn, crack, rip nor break)
Yes, you are right – the png is a bit sharper on the preview image of the gallery, but at what price?
A page with 5-6 png of this dimension would take much longer to load completely. The surfing behaviour of most visitors to a page is such that if a page takes longer than 5 seconds to load, the attention is reduced to zero.

It is described above and again in the second part:
Id and class,

and especially the background had to be set to scroll.

.bg-fixed {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
	background-size: 0 !important;
	overflow: hidden;
	position: relative;
}

.bg-fixed:before {
	content: "";
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: inherit !important;
	background-repeat: no-repeat !important;
	background-size: cover;       /** or contain - what you need **/
	background-position: inherit;
/** will-change: transform;    - only if you have less then 3 images like that ***/
}

@media only screen and (max-width: 767px) {
  #myid.bg-fixed:before {
    background-image: url(/wp-content/uploads/alternative-image.jpg) !important;
  }
}

There is nothing more I can do than to give a detailed instruction and also show a working test page. If not read carefully, then unfortunately I cannot do more. I will only make instructional films if there is no other way to create clarity.

well on Victorias link the wrapping container in enfold for the images is: avia-slide-wrap

i would give a custom-class to the slideshow you like to influence – f.e.: kenburns
then it will be nice if only the active slide is doing that – so when i transpose the code from code pen to enfold classes :

.kenburns .active-slide .avia-slide-wrap {
  width: 100%;
  height: 56.25vw;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.kenburns .active-slide .avia-slide-wrap img {
  width: 100%;
  animation: move 20s ease infinite alternate;
  -ms-animation: move 20s ease infinite alternate;
  -webkit-animation: move 20s ease infinite alternate;
  -0-animation: move 20s ease infinite alternate;
  -moz-animation: move 20s ease infinite alternate;
  position: absolute;
}

@-webkit-keyframes move {
  0% {
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    transform: scale(1.0);
    -ms-transform: scale(1.0); 
    -webkit-transform: scale(1.0);
    -o-transform: scale(1.0);
    -moz-transform: scale(1.0);
  }
  100% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);   
    -o-transform: scale(1.2);
    -moz-transform: scale(1.2);
  }
}

don’t know if all cross-browser settings are neccessary today – but i let them stay in the quick css code.
Important: see ( height: 56.25vw; ) if the width of the slider is 100vw then a 16:9 height will be approx: 56.25vw
The Code Pen Code only works nice if you have set a hight on that and that should reflect the aspect ratio well.
So it might be nice to have for Slideshows having a film slide with 16:9 format – the images got the same size on that.
I have on that testpage images of that format.:
https://webers-testseite.de/slider-with-kenburns/

No ! – a linebreak is something different.
A Softhyphen is a conditional hyphen. It breaks a word if the surrounding place is not big enough – and sets on that case a hyphen.

You can use &shy and directly after it a semicolon ­ will then have that effect.

But big disadvantage you will not see the place on the backend if and where you have set it. And i guess on editing that f.e. heading again it will be lost.

so use Günters little helpful plugin with some extra characters : Advanced Special Characters

you can open that php and edit it to your needs ( because i do not want to use three # before and after those signs – i changed it only to one )
and added some special characters – so my translation list looks like this:

even in code tag it will change the signs – so only an image of it:

or on pastebin the complete php to put in your plugins directory: Link

so usage is easy – when using #shy# the soft-hyphen is set and can be seen on backend and is permanent set even on editing the alb again:


Resultspage: https://webers-testseite.de/special-characters/

PS: this is very helpfull because if you like to insert signs as greater than or less or equal than etc. The Editor will handle them as a beginning tag – and so sometimes breaks the layout. Try to insert to a table alb element a greater than sign !

Edit: seems to be changed on newest Enfold something that in text-blocks the greater than and similar are no longer miss interpreted now after all

I would not realize it with two color sections.
e.g. if you want to navigate to it using anchor link.

just create one color-section – give a unique ID to it ( f.e: myid ) and a custom-class : bg-fixed
this custom-class is for all those backgrounds the same only the ID should be unique.
and for your smaller screens set a css to your quick css to change the background images.
Set the background-image to scroll !!! to avoid the parallax extra container.

( PS: Google search on : background-attachment:fixed and mobile browsers – especially IOS ( iphone, ipad etc).

My solution to this problem circumvents the background-attachment : fixed by creating a pseudocontainer with a fixed position.:
This goes to quick css:

.bg-fixed {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
	background-size: 0 !important;
	overflow: hidden;
	position: relative;
}

.bg-fixed:before {
	content: "";
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: inherit !important;
	background-repeat: no-repeat !important;
	background-size: cover;       /** or contain - what you need **/
	background-position: inherit;
/** will-change: transform;    - only if you have less then 3 images like that ***/
}

this also goes to the quick css:
now you only have to set for smaller screens a different background-image by using the unique ID:

@media only screen and (max-width: 767px) {
  #myid.bg-fixed:before {
    background-image: url(/wp-content/uploads/alternative-image.jpg) !important;
  }
}

see result: https://webers-testseite.de/donkey/

INFO: will-change usage

But you like to remove only the link option on single post not on the archive post list?

You can see here that i inserted a ternery operator on setting the link in the avia_default_title_filter function on helper-post-format.php
this code here is different to the standard code:

$output .= is_singular() ? $current_post['title'] : "<a href='".get_permalink()."' rel='bookmark' title='". __('Permanent Link:','avia_framework')." ".$current_post['title']."'>".$current_post['title'];
$output .= "<span class='post-format-icon minor-meta'></span>";
$output .= is_singular() ? '' : '</a>';

so put this to your child-theme functions.php:

function avia_default_title_filter($current_post){
	if(!empty($current_post['title']))
	{
		$default_heading = is_singular() ? 'h1' : 'h2';
		$args = array(
					'heading'		=> $default_heading,
					'extra_class'	=> ''
				);
	
		$args = apply_filters( 'avf_customize_heading_settings', $args, 'avia_default_title_filter', array( $current_post ) );
		
		$heading = ! empty( $args['heading'] ) ? $args['heading'] : $default_heading;
		$css = ! empty( $args['extra_class'] ) ? $args['extra_class'] : '';

		$output  = "";
		//$output .= "<{$heading} class='post-title entry-title ". avia_offset_class('meta', false). "'>";
		$output .= "<{$heading} class='post-title entry-title {$css}' ".avia_markup_helper(array('context' => 'entry_title','echo'=>false)).">";
		$output .= is_singular() ? $current_post['title'] : "<a href='".get_permalink()."' rel='bookmark' title='". __('Permanent Link:','avia_framework')." ".$current_post['title']."'>".$current_post['title'];
		$output .= "<span class='post-format-icon minor-meta'></span>";
		$output .= is_singular() ? '' : '</a>';
		$output .= "</{$heading}>";
		$current_post['title'] = $output;
	}
	return $current_post;
}

and by the way you can change here the tag of the heading on archives and single post on this line above:
$default_heading = is_singular() ? 'h1' : 'h2';
this is ternery operator again – if you have a single post it is h1 – else h2

Maybe this should be the standard on helper-post-format.php – because it does not make sense to link to the post itself

on my end the videos starts quick – yes the selfhosted is faster ( but this is dependent on the traffic of this page ) – but even the vimeo video starts after 1s on my end here.
What i see on the page with the vimeo video is that the fallback-image is a very large jpg ( first i would crop the image to the aspect ratio of the film 16:9 – then i would compress it more ) this jpg is compresse 232kb big and loaded 14MB – you see on gtmetrix ( https://gtmetrix.com/reports/hebmp.nl/k3qZGK8O ) that this alone loads 614ms.
And your page has a total page size of 14.4 MB. Maybe the videos are not the reason for slow loading.

On the first page there is the same issue ( https://gtmetrix.com/reports/hebmp.nl/aYy5cBiw )
Try to make those images smaller – especially because well over 90% of all visitors to your site will never get to see them anyway.
After that we will see what happens

On timings you see that the TTFB ( Time to First Byte ) is over one second – maybe you search for “How to optimize Time To First Byte (TTFB)” and follow some advices there

all those input fields are set on register-admin-options.php
lines 4598ff for phone
lines 4783ff for copyright

have a look if these entries are there.
Or have a look if you have on your parent theme functions.php at the end since line 834ff just before
require_once( 'functions-enfold.php'); some code that could influence the admin area like:

function admin_head_mod() {
  echo '<style type="text/css">
  … some css settings for the admin area
  </style>';
}
add_action('admin_head', 'admin_head_mod');

this makes me wonder because on default the phone-info field is represented by a class: phone-info
i do not see your private content – because i’m participant as you are – so i could not give you better instructions to find the reason.

Maybe you have a look to your child-theme functions.php if there are entries concerning to phone or copyright.

here you can see what for the single rules are:

// im Admin bereich das Eingabefeld des quick css verbreitern
function admin_head_mod() {
  echo '<style type="text/css">
  #avia_quick_css .avia_description {float: none;margin-bottom: 20px !important;padding-left: 0 !important;width: 98%} /** quick css input field width **/ 
  #avia_quick_css .avia_control {float: left;max-width: 98% !important;width: 98% !important}   /** quick css input field width **/ 
  .avia_footer_links li {float: left;padding-right: 20px}
  .avia_footer .avia_footer_save {float: left}   /** save button now on the left **/
  .avia_reset {display: none !important }  /** remove reset Button on Enfold Options **/
  #avia_options_page { max-width: 3000px!important}  /** Optionswidth  **/
  .avia-modal-toggle-container.avia-modal-toggle-ready.avia-modal-section_headers a.avia-modal-toggle-title { padding: 2px; margin: 3px 12px; font-weight: normal; background: #a3c0ed}  /** toggle headings **/
  .shortcode_insert_button { height: 100px; width: 140px;}  /** the shortcodes insert buttons on alb **/
  .shortcode_insert_button img { opacity: 1; width: 60%;}  /** the shortcodes insert buttons image on alb **/
  </style>';
}
add_action('admin_head', 'admin_head_mod');

the breadcrumb belongs to the alternate color – so try this:

.container_wrap.alternate_color {
    background-color: #f5eed9 !important;
}

PS : maybe you decide to break the menu earlier to hamburger menu – because on smaller screens the menu overlaps the logo.
and maybe you like to have the logo and main menu on Enfold Options : header – header behavior : “Let logo and menu position adapt to browser window” – then you will not come as soon into conflict with the menu overlapping the logo.

The limitation to the outer dimension from 300px to 100px can be changed via Quick css or by selecting the header height.
When inserting the logo, did you pay attention to the calculated size of the file you are using? :