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, 4 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, 4 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

but magnific-popup is part of Enfold – did you deregister the parent script in your child-theme before ?

wp_deregister_script( 'avia-popup-js' );
wp_enqueue_script( 'avia-popup-js-child', get_stylesheet_directory_uri().'/js/aviapopup/jquery.magnific-popup.min.js', array('jquery'), $vn, true);

so what is your benefit to have an own child-theme loading of the script? It is already loaded!

“I’m using a (possibly old version)…”
Or maybe you have a misconception about how a child theme interacts with the parent theme?

A child theme on its fundamental construction has three files – a style.css – and that is the basic part telling WordPress that eventually parts will be added to the parent theme; an initially still empty functions.php and a thumbnail for the dashboard.
Files with the same name in the child theme folder replace the corresponding files in the parent theme – except for the functions.php file.
The functions.php is used to add additional properties to the parent theme via code snippets. These snippets can of course also override parent theme functions through certain phrases.

hey Jean – a few days ago i come to your topic here and indeed i saw your described behavior on the first link.
But now – when i open your link the image is loaded in the lightbox but video not.
Did you solve your problems?

By the way: what function did the gallery have in your layout ?

Edit: oh now i see – i did only check the small image under the big one. Yes – it is still there-

I would try to separate the colums by putting them in different color-sections. Because you do not have sidebar here – this would be an option.
This is strange because you haven’t an image link on the videos.
This behavior i got once because i set up an image with youtube open in a lightbox. But even there are different lightbox types ( image, iframe)

@Rikard : that extra-class : anchor-link is only on my installation present. Not on default Enfold settings. ;)

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

https://kriesi.at/documentation/enfold/footer/#copyrights-info

yes: this is not a warning that you have activated the self-destruction button : it might break !

Warning: Characters <,>,[,] might break ALB backend or frontend. Read more if you want to use them. You can use valid HTML markup.

And you see in detail what characters could indicate that. – those which are correlated with code ( tags etc. )