PS: wenn es sich nur um diese Seite ( bzw ist ja ein single post) könnten wir das ganze noch nur für diese Seite setzen.
z.b #top.postid-3432 .mfp-top-bar
und if(is_single(3432)){ … }

und da du ja ohnehin noch in alle nochmal rein musst (ist momentan ja nur das Angst Video zu sehen) , um die Links zu setzen, – du brauchst hierfür nicht mehr das addendum “?iframe=true” setzen, da wir ja unseren eigenen Trigger zur Auslösung der Lightbox definiert haben. Für SEO wäre es schon besser du würdest dann auch den Title richtig setzen – obwohl wir Ihn ja momentan nicht benötigen.
Innerhalb der Text Box reicht es wenn du die Begriffe so setzt:

<a href="/wp-content/uploads/Future-12917-1.mp4" target="_blank" rel="noopener">etwas anderes</a>

PPS:
– die spans benötigst du auch nicht, das würde ich über quick css auf einmal setzen:

#after_submenu .avia_textblock p {
	font-weight: bold;
	font-size: 14pt; 
	font-family: verdana, geneva, sans-serif;
}

– damit die Video Galerie nun nur innerhalb eines Anfangsbuchstaben rotieren ( loop ) können wir Gruppen setzen.

first – to have a high specific selector it might be better to have a unique ID or Class at one parent-element of all those links – f.e. a custom iD to the color-section that is now named : after_submenu and contains all your links.

can you please post the inserted phrase in the text-block – did you do that all manually?
i see on all the titel=”Text” – why don’t you give the correct title to each post? – but we don’t need it for a custom lightbox markup

https://webers-testseite.de/protom/

After that i will adjust the code for you .

• This reply was modified 4 years, 11 months ago by Guenni007.

if your width is 1920px the height had to be : 1080px ( 1920 x 9 / 16 )
and mediaquerries switch point must be adjusted too.

so it had to be instead:

.avia-section.not-fullsize {
  background-size: 0;
  height: 56.25vw
}

.not-fullsize .avia-slideshow {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto !important;
}

.avia-section.not-fullsize::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit !important;
    background-repeat: no-repeat;
    z-index: 5 !important;
    will-change: transform;
    pointer-events: none;
}

@media only screen and (min-width: 1920px){
    .avia-section.not-fullsize::after {
        background-size: 1920px 1080px;
        background-position: center center;
    }
    .not-fullsize .avia-slideshow,
    .avia-section.not-fullsize {
        height: 1080px !important;
    }
}

@media only screen and (max-width: 1919px){
  .avia-section.not-fullsize::after {
    background-size: 100vw 56.25vw;
    background-position: center center;
  }
}

btw. you can use normal pdf browser viewer and embed a pdf like this:
https://webers-testseite.de/pdf-on-website/

first: if there is css code posted ? – on default the normal place to insert is quick css – you put it as ID ???

_______

A normal support of the team here should not really exceed the 10min. However, special requests are sometimes so complex that this time can not be kept here. – I do this on a whim, if I have time for it, and if it is an interesting question.
The approximation to your request should be sufficiently fulfilled with the following answer. I don’t feel like including the padding at the moment.

So the second of my example color sections has your video and a background graphic (your png) – both to be set as usual via the color section ALB element.

Please give the Color-Section the class: not-fullsize
and the following settings on alb element

The construction of the “background” is to go over the pseudo-container :after – which inherits the background of the color-section –
the section height has to be in relation to the video aspect ratio.

.avia-section.not-fullsize {
  background-size: 0;
  height: 56.25vw
}

.not-fullsize .avia-slideshow {
    width: 100%;
    max-width: 1410px;
    margin: 0 auto !important;
}

.avia-section.not-fullsize::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit !important;
    background-repeat: no-repeat;
    z-index: 5 !important;
    will-change: transform;
    pointer-events: none;
}

@media only screen and (min-width: 1410px){
    .avia-section.not-fullsize::after {
        background-size: 1410px 793px;
        background-position: center center;
    }
    .not-fullsize .avia-slideshow,
    .avia-section.not-fullsize {
        height: 793px !important
    }
}

@media only screen and (max-width: 1409px){
  .avia-section.not-fullsize::after {
    background-size: 100vw 56.25vw;
    background-position: center center;
  }
}

see again: https://webers-testseite.de/video-behind-a-hole/

you had to adjust the value of 1410px to your needs
my test page got 1510px and a padding of 50px left right. so a normal container width of the 1/1 container would be 1410px

if the video got the 16:9 aspect-ratio
for screens >= 1410px a video-width of 1410px so the height is : 1410*9/16 = 793px
for screens <= 1409px the video-width is 100vw (100% videoscreen-width) the height is then = 56.25vw

but nevertheless – i resetted one of my testpages – with enfold avia_reset button.
i emptied my child-theme functions.php – when i insert a new gallery – even make the setting of “Lightbox image description text” before inserting the images to the gallery – the lightbox shows the title. It seems that the lightbox images still take the title from the img and not from the anchor-tag. (and that is normal behavior on magnific popup titleSrc.
Again : i would have expected that there is no text in the lightbox.
_____________
@rob:
div .mfp-title { display: none !important;}
is working on that testinstall ( WP5.7/Enfold4.8.1) – and – yes you had to refresh all merging and browser cache etc. pp. if there are other caching tools too.

btw. rob an error like this in your konsole : Uncaught TypeError: e.indexOf is not a function

often comes if the new jQuery 3.5.1 is confrontrated with script like $(window).load(function(){
– that is deprecated code
replace instead : $(window).on('load', function(){
.click(function() with .on('click', function()

you got it in:

jQuery(window).load(function(){
	jQuery('#wrap_all a').removeAttr('title');
	jQuery('#wrap_all img').removeAttr('title');
	jQuery('.av-masonry-image-container').removeAttr('title');
});

have a look if there are other places you use the mentioned above.

have a look at this page – with your image:
https://webers-testseite.de/jean/
you see on the lightbox now a magnifier – it only magnifies ( quick solution) to 200% on click – but that would be enough?

now i do not see the video – why do you try to insert it via text-block element?
you got a video layout builder element on Enfold ( Media-Elements tab – video)
put in that alb element the video link like : https://www.youtube.com/watch?v=AKaGlZ8OfbI

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

but nevertheless – the mobile versions will not work as expected-
so maybe then you do all that code in a media query with min-width

have a look : https://webers-testseite.de/video-behind-a-hole/
but a png will be very performance intensive on that.
this is a video alb in a color-section ( color-section with custom-class: hole-before )

 .hole-before .avia-iframe-wrap::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://webers-testseite.de/wp-content/uploads/fire-hole-2908115.png);
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events:none
}

my question was – for what you load a script in child, which is already loaded via parent theme.
It would only make sense if you have made changes to the script. – However, then it must be done as I showed – first deregister the parent script and then load the script in the child theme. ( and your folder-structure is the same as above: child-theme/js/aviapopup/ )
The : Enfold – Theme Options – “Lightbox Modal Window” – it is on default checked.
So just leave it activated and take this loading of the script out of your child theme better again.
Did you use the predefined child-theme of enfold? : Link
Why do you think that something is not loaded correctly ?

Or is it an older install that you have updated to newest Enfold?
there are some instructions concerning to lightbox in the header.php – so if you got in your child-theme an older header.php – you had to bring this file again to the newest version and place your changings in it again.

did you use the full resolution images for the lightbox?
on default it is not that case. It uses the large image for it. – There are some snippets for child-theme functions.php to set the source for lightbox images to “full”

btw: how did you realise the zoom?

• This reply was modified 4 years, 11 months ago by Guenni007.

One chance to get for this image in the first column an own magnific-popup.
give to the first column with that image two custom classes ( put in that custom-class input field: ) noLightbox group1

the first class is to hamper enfolds lightbox for all those images inside that column.
The second is for having a trigger to get the popup.

put this in your child-theme functions.php:

function open_image_in_popup_group(){
?>
<script type="text/javascript">
(function($){
	$(window).on('load', function(){
		$('.group1').magnificPopup({
		  delegate: 'a',
		  type: 'image',
		  mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded',
		  closeBtnInside: true,
		  closeOnContentClick:false,
		  midClick: true,
		  gallery: { enabled:true }
		});
	});	
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'open_image_in_popup_group');

See again my test page: https://webers-testseite.de/jean/

• This reply was modified 4 years, 11 months ago by Guenni007.

it had to be an additional tool or script-
if i inspect my test page to look for the youtube id – i only find these ( in this case 4 sources – local preview image with same id – iframes ) but all are place inside the color section it concerns.
When i inspect your site and look for the id: Ri38SkRFDcY there are a lot of script entries about that ID – script with class: rank-math-schema-pro.
Maybe this is causing the issue