My recommendation is not to host such big video files yourself. As Ismael mentioned – use a video hoster.
If this happens to you a lot, the smallest Vimeo account is worth it; it doesn’t have any ads or other videos that pop up when you pause or stop watching.

This is only for top-level menu-items (if you like to have a different selector – tell us. )

.header_color .main_menu ul:first-child > li.current-menu-item .avia-menu-text {
  font-weight: 700;
}

Sorry – wrong Topic – my fault.

ok – if this is ok for you – see: https://webers-testseite.de/jak-contact/
( due to maintainance mode of my hoster – page might be not seen today )

snippet for child-theme functions.php and the contakt form 7 Form code is on that page.

snippet:
(The script is necessary because CF7 does not provide a way to select whether an input field is in focus or filled.)

function class_on_active_form_fields(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
  (function($) {     
    $('.wpcf7-form-control').each(function() {
      $(this).on('focus', function() {
        $(this).parent().addClass('active');
      });
      $(this).on('blur', function() {
        if ($(this).val().length == 0) {
          $(this).parent().removeClass('active');
        }
      });
    });
  })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'class_on_active_form_fields');

the css ( with your wrapper class ):

.form-wrapper {
  position : relative !important;
}

.form-wrapper .placeholder {
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0.5;
  transition: opacity 1s ease;
  pointer-events: none;
}

.form-wrapper .asterisk {
  color: red !important;
}

.wpcf7-form-control-wrap.active + .placeholder { 
  opacity: 0 !important;
}

the form in this setup:

<div class="form-wrapper">[text* first-name placeholder ""]<span class="placeholder">First name <span class="asterisk">*</span></span></div>
<div class="form-wrapper">[text* last-name placeholder ""]<span class="placeholder">Last name <span class="asterisk">*</span></span></div>
<div class="form-wrapper">[email* your-email placeholder " "]<span class="placeholder">E-Mail <span class="asterisk">*</span></span></div>
<div class="form-wrapper">[textarea* textarea-716 placeholder " "]<span class="placeholder">Placeholder <span class="asterisk">*</span></span></div>

<div class="form-wrapper">[submit "Send"]</div>

but remember: https://kriesi.at/support/topic/adding-captions-to-the-lightboxes-in-a-masonry/#post-1467815

I think it has to do with the elements not loading until you have scrolled through the masonry position due to the delayed animation. On my site, sometimes this works – sometimes it doesn’t.

Using the ‘Load More’ button even cancels this out completely after pressing Load More.

or – maybe a simpler idea – we use the left header sidebar ! – and just handle the #wrap_all as a flex container – and define the order in this way that the header goes to the right side

@media only screen and (min-width: 768px) {
  #wrap_all {
    display: flex !important;
    flex-flow: row nowrap;
  }

  #wrap_all #header {
    order: 2;
    flex: 0 1 27%;
    right: 0;
    left: auto;
  }

  #wrap_all #main {
    order: 1;
    flex: 0 1 73%;
    margin-left: 0 !important;
    border-left: none !important;
  }
  
  .responsive #top .header_bg {
    box-shadow: -5px 0px 5px -5px #666;
  }

  /*** because submenu is defined to a width of 208px ***/
  #top #avia-menu > li.dropdown_ul_available > ul.sub-menu {
    left: -207px
  }

  /*** have a bit more space from main menu-item to the fly-out submenu ***/
  .html_header_sidebar #header .av-main-nav>li {
    margin-left: 5px !important;
    padding-left: 13px;
  }
}

@media only screen and (min-width: 990px)  {
  #wrap_all #header {
    flex: 0 1 300px;
  }

  #wrap_all #main {
    flex: 0 1 calc(100% - 300px);
  }
}

see: https://enfold.webers-webdesign.de/
( the scroll away after some time does not belong to that settings here. – this is part of the inital Headersetting )

this is not styled to the end – becaue i want to go back to the original setting of header on top.
above all, you now have to extend the subnavigation to the left – but that shouldn’t be a problem using css.