kannst Du mal stattdessen dieses zip nutzen. Lösche deinen hochgeladenen font und entferne im Font-Manager den font. Ich habe da auch die woff2 fonts integriert. Eventuell kommen die mobilen Endgeräte damit besser zurecht.:

https://webers-testseite.de/Gloria-Hallelujah.zip

So why not follow the recommendation and use custom.css instead?

just remove those

  border-radius:20px;
  background-color:rgba(0,0,0,0.1);
  backdrop-filter:blur(6px)

so it is only for that selector:

#top .html5-video .overlay {
  position:absolute;
  width:25vw !important;
  height:21.25vw;
  min-width:140px;
  min-height:119px;
  max-width:411px;
  max-height:349px;
  top:12vw;
  left:8vw;
  padding:15px;
}

if you are using a child-theme – the child-theme style.css could be used – but isn’t it much easier to use the quick css of your enfold child – general styling – quick css

Quick CSS
Just want to do some quick CSS changes? Enter them here, they will be applied to the theme. If you need to change major portions of the theme please use the custom.css file or the Enfold Child theme.

if you open that parent style.css :

/*
* PLEASE DO NOT EDIT THIS FILE!
*
* This file is only in your themefolder for WordPress to recognize basic theme data like name and version
* CSS Rules in this file will not be used by the theme.
* Instead use the custom.css file that is located in your themes /css/ folder to add your styles.
* You can copy a style rule from any of your css files and paste it in custom.css and
* it will override the original style. If you just want to add small css snippets you might also
* want to consider to add it to the designated CSS option field in your themes backend at: Theme Options->General Styling
*/

or use the quick css input on enfold (child) options page.

I’m not sure if there’s anything else I can tell you, other than what you can see on the page.
On top ? Well it is the first color-section on that page. If you like to have it behind header – then you had to choose the enfold transparency option for the page.

Color-Section with custom-class: html5-video ; inside that color-section a code-block element and column (custom-class: overlay) with your image (logo). The width of that column is ruled by css.

have a look to this solution for another participant:
https://webers-testseite.de/html5-video-fanlokbun-2/

in your case you do not need to place the column on the right side with an empty column before. That position is ruled by css only.

see: https://webers-testseite.de/html5-video-bhe/
your heading and text is inside that overlay column.

PS: if you do not like that i use your video here – tell me after you have seen the demo page and i will replace it by a different video.

PPS: the font-size-adjust property seems not to be supported by all browsers – so for very small screens you had to adjust the font-size by conventional methods

maybe this is a solution for you too: https://webers-testseite.de/html5-video-embed/

i will have a look with your logo and video to make a working solution…

maybe there had to be a little adjustments – on your page ( f.e. due to your navigation and when it breaks to burger menue )
https://webers-testseite.de/html5-video-fanlokbun/

You can do that with code-block element inside color-section. Best is to better select – a custom class for the color-section.
in my example page it is: html5-video

see code and example on : https://webers-testseite.de/html5-video-embed/

btw: if you change some declaration inside the given css code – this overlay might be fixed :
(change means not to replace the whole rule but just to f.e. change the position to fixed – the rest of the declarations had to be in place.)
f.e.:

.responsive #top #wrap_all .html5-video .container {
  clip-path: inset(0 0 0 0);
}

#top .html5-video .overlay {
  position: fixed;
  top: 0;
  transform: translate(-50%, 25vw);
}

or you shift the next section over the first one … etc.

just like on :
https://kriesi.at/support/topic/add-logo-to-full-screen-slider/#post-1480358
f.e.:
(and maybe a small drop-shadow to the png

#top .avia-fullwidth-slider::after {
  position: absolute;
  display: block;
  content: "";
  width: 18vw;
  height: 15.3vw;
  max-width: 411px;
  max-height: 349px;
  min-width: 200px;
  min-height: 170px;
  top: 120px;
  left: 80px;
  background-image: url(/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
  background-repeat: no-repeat;
  background-size: calc(100% - 40px) calc(100% - 40px);
  background-position:center center;
  filter: drop-shadow(1px 1px 2px #666);
}

@media only screen and (max-width: 767px) {
  #top .avia-fullwidth-slider::after {
    top: 2vw;
    left: 2vw;
  }
}

but i see that the slider is not shown on mobile? And we had to place always a fallback image for videos?
dear mods – has this always been the case with Enfold?
It is unfortunate that we do not have the opportunity to decide for ourselves.

now we had top better find settings for relative dimension for your overlay image. …
and maybe it is better to have that only on bigger screens?

@media only screen and (min-width: 768px) {
  #top .avia-fullwidth-slider::after {
    position: absolute;
    display: block;
    content: "";
    width: 18vw;
    height: 15.3vw;
    max-width: 300px;
    max-height: 255px;
    top: 80px;
    left: 5vw;
    background-image: url(/wp-content/uploads/2025/03/Gathering-Barn-Banner-Logo-.png);
    background-repeat: no-repeat;
    background-size: calc(100% - 40px) calc(100% - 40px);
    background-position:center center;
    background-color: rgba(159, 171, 154, 0.5);
    backdrop-filter: blur(4px);
    border-radius:20px;
    border: 2px solid #9fab9a;
  }
}

and for extra large screens it might be best to have a max-width/-height
always stay the aspect ratio of your inserted image (in your case 1/0.85)

Sorry – now i see that you used the fullscreen slider! why?
Anyway – this is similiar to the other slider – but then the video is cropped on some screen width.

because your png isn’t transparent it does not make sense to have a limit of after pseudo-container:

#top .avia-fullscreen-slider:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 150px;
  left: 50px;
  background-image: url(https://www.thegatheringbarn.co.uk/wp-content/uploads/2017/04/logo2.png);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position: 20px 10px;
}

as menitoned above – use a custom class to better select.

PS: this page is transparent? why don’t you use the logo instead for “branding”

did you try ismaels code?
in your div there is no id – only a data-sender-form-id thats why i ask.

but: you see on ismaels code the callback – so this might be work as expected.
maybe a delegate : ‘a’,

is missing – just try first the code above.

please remember that ( this is definitly not the trouble with your scripts – but just to mention )

$(window).load(function() {

is deprecated since jQuery 3.x

you had to use now:

$(window).on('load', function(){

or use those icons inside a text-block element: see example page at the bottom.

[av_textblock fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' textblock_styling_align='' textblock_styling='' textblock_styling_gap='' textblock_styling_mobile='' size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' fold_timer='' z_index_fold='' id='' custom_class='center-stars' template_class='' element_template='' one_element_template='' av_uid='av-psa03l' sc_version='1.0' admin_preview_bg='']
[av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-8z2voh' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-27dcl9d' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-1kvehwh' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-4al7hd' sc_version='1.0' admin_preview_bg=''][/av_font_icon][av_font_icon icon='ue808' font='entypo-fontello' style='' caption='' size='40px' position='left' color='#eacf00' link='' link_dynamic='' linktarget='' title_attr='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' animation='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='av-n9hech' sc_version='1.0' admin_preview_bg=''][/av_font_icon]
[/av_textblock]