what youtube code did you enter?
in combination with lightbox please try it with “watch” : like – https://www.youtube.com/watch?v=G0k3kHtyoqc
on your link above this is not the case – so maybe Mike is right and there are some Content-Security-Policy entries in your htaccess file.

___________
Edit: your video is playing – but there is no image – your audio is working on the video!

:lol ) you got an inline rule :

div div iframe {
  opacity: 0;
  border-style: none;
  visibility: hidden;
}

don’t know where it comes from ?
if you do not find it – try first to overwrite that rule by:

#top div div iframe {
  opacity: 1 !important;
  border-style: none;
  visibility: visible !important;
}

why there is no preview image on that i do not know!

try this in your quick css:
( it is always better to see the page to create a precise code ) ;)

#top .avia_ajax_form .input_checkbox {
  width: 100%;
  margin: 15px auto;
  position: relative;
  display: block;
}
#top .avia_ajax_form .input_checkbox_label {
  position: relative;
  min-height: 34px;
  display: block;
  padding-left: 40px;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
  line-height: 30px;
  text-align: left;
}
#top .avia_ajax_form .input_checkbox_label span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
#top .avia_ajax_form .input_checkbox_label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  margin: 4px;
  width: 15px;
  height: 15px;
  transition: transform 0.28s ease;
  border-radius: 3px;
  border: 2px solid #007400;
}
#top .avia_ajax_form .input_checkbox_label:after {
  content: "";
  display: block;
  width: 10px;
  height: 5px;
  border-bottom: 2px solid #FFF;
  border-left: 2px solid #FFF;
  transform: rotate(-45deg) scale(0);
  transition: transform ease 0.25s;
  position: absolute;
  top: 8px;
  left: 8px;
}
#top .avia_ajax_form .input_checkbox {
  display: none;
}
#top .avia_ajax_form .input_checkbox:checked ~ .input_checkbox_label:before {
  border: 2px solid #007400;
  background-color: #007400;
}
#top .avia_ajax_form .input_checkbox:checked ~ .input_checkbox_label:after {
  transform: rotate(-45deg) scale(1);
}
#top .avia_ajax_form .input_checkbox:focus + .input_checkbox_label::before {
  outline: 0;
}

.av-masonry-entry .avia-arrow {
  display: none;
}

next possibility is : transfer the first link inside that color-section to the color-section itself.
best would be to give a custom-class to that color-section – in my testpage it is: section-link

function transfer_first_link_as_section_link(){
?>
<script type="text/javascript">
(function($) {
$(document).ready(function(){    
    $('.avia-section.section-link').each( function() {
      var LinkSection = $(this).find('a:first').attr('href');
      var LinkTarget = $(this).find('a:first').attr('target');
      if (typeof LinkSection !== "undefined"){
        $(this).on("click", function(){
          if (LinkTarget === "_blank"){
            window.open( LinkSection, '_blank' ); 
          } else {
            window.location.href = LinkSection;
          };
        });
        $(this).css('cursor','pointer');
      };
    });
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'transfer_first_link_as_section_link');

see: https://webers-testseite.de/profumo/

it is because of this rule from layout.css –
outline is as the name indicates outside the container.

.logo, .logo a {
  overflow: hidden;
  position: relative;
  display: block;
  height: 100%;
}

change the overflow to visible
btw. did you test the One Click Accessibility Plugin. Enfold supports it by default.

add to the existing flex container:

.homeTrioLocation {
  align-items: center;
}

.trioIcon {
  padding: 30px 15px;
}

play with the 15px value to get the part bigger. f.e. 25px

thanks – and you want the whole page on max-width 100% ?

As you stated yourself : Take the fullwidth easy slider.
Big advantage – the image is responsive from the beginning.
– why should it be less performant than a color-section ?

#footer .container {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

You can see here that it is centered – but visually it does not appear to be so ( click to enlarge the image)

first Rikard is right – i do neither see that ID.
but if i look to your css – there is instead of an opening curly bracket a closing – see that line – besides this is a strange selector :lol: it has two closing brackets

.flex_column.av_one_full.flex_column_div.first.avia-builder-el-45.el_after_av_one_half.avia-builder-el-last.column-top-margin; }
…
}

(click to enlarge)

hm – i can not believe this – but there are topics concerning to this already.

nor:

leads on my installation to any conflict – with php8 or php7.4
i can not imagine the reason why. very strange

If you got some snippets in your child-theme functions.php – you had to look for:

$(window).load(function(){
// It is deprecated in php8 ( because jQuery is now 3.5.1 and later)  now and it must be used:
$(window).on('load', function(){
// this here too:
.click(function () {
// had to be replaced with:
.on('click', function () {

_________
php8 comes along with jQuery 3.5.1 and these are such common stumbling blocks that experienced web designers think about before updating. ;)

Also, a popular mistake is updating the themes but not updating the child-theme substitutes you wrote for the older version. This is what happened with the footer.php. Some new features were added there, which then could not work with an older child theme version.

My advice in this context is to turn off the automatic updates anyway and keep up manually.
I now had the case with a customer that the provider upgraded to Debian Bullseye (09 October 2021) . This would not be a problem except for the fact that Bullseye actually only comes with Apache 2.4 commands. So suddenly modules were missing that some plugin (still) needed. All things you have to read before to update afterwards. Or – you have a test site on which you can fathom such things wonderfully.
Customer sites – especially those with store systems – I always completely secure before with Duplicator Pro – to be able to perform a rollback if necessary.

Or style that “footer” as page – completely like this

and use that page as footer in enfold options footer:

is there a test page to see what exactly is the problem?

or : look to your content if you use f.e. some signs that belongs to a tag f.e. a greater than sign in a table will cause a mismatch.
There are methods to circumvent that.