Dear Ipuls
– first : i’m participant as you – so i can not see the private content
– second: the link to my little tut is still active and Enfold is there on Version 4.5.4. so it might work as you can see.
– third: the download is not necessary – that was from an Enfold 4.1 – a lot of changings have been made ( f.e. an unmute button is now present on ALB-Element.

Read carefully.

A child-theme seems to be the best way. Because you can have then a section.php in your child-theme/shortcodes folder
how to activate the replacement of child-theme ALB Elements you can read here on Top: https://webers-testseite.de/edited-enfold-alb-elements/
Have you set custom-classes for the color-section? ( two classe as described because you don’t want to have that buttons always if you have an overlay effect on a color-section.
The section.php as described change true to false on line 1097 (Enfold 4.5.4):

find in section.php:
'video_mute' => true,
and set to :
'video_mute' => false,

The Quick Css Parts : did you adjust the url ? because if you got on Dashboard – Settings – Media: “Organise my uploads into month- and year-based folders” the url will be different !!!

ok – it must work this way.

By the way if you do not choose flexible masonry – the selector will be a different one ( and the img gets a background-img etc. )

may i ask why it has to be a portfolio grid?
you want to link to youtube itself or in a lightbox?

is there a link to your site?
you are using an enfold version newer than 4.5 ?

Yes – gridrow – two 1/2 under each other – height at least 50%
Fill each Cell with your image and for the link – the cells got link option !
Template blank with no header no footer and no breadcrumbs. That will be your landing page.
But this page has to have good meta description and tags – because it would have bad SEO for your landingpage.

Advantage – you can fill each cell with extra-content if you like ( Headings etc. )
see here: https://webers-testseite.de/landingpage/

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

i think this will be enough code –
lets see if this comes into conflict at some pages

delete:

.entry-content {
    min-height: 650px;
}

so try first this here in quick css:

@media (min-width: 768px) {
	#main {
	    display: flex;
	    height: 100vh;
	    flex-direction: column;
	    position: relative !important;
	    overflow: visible !important;
	}

	.container_wrap {
	    flex: 1 0 auto;
	    width: 100% !important;
	}

	#footer, #socket{
	  flex:none;
	}
}

maybe try this in quick css – it is only for selfhosted videos:

video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px); /* Adjust if necessary */
}

i do not see these elements

see code above again maybe a gloom around the iframe in your green:

.mfp-iframe-holder .mfp-content {
    max-width: 80vw !important;
    box-shadow: 0 0 40px #77c84c;
}

and if you don’t want that background is scrollable if iframe is open – put this to child-theme functions.php :

add_action('wp_footer', 'no_background_scroll_on_lightbox_open');
function no_background_scroll_on_lightbox_open(){
?>
<script type="text/javascript">
(function($) {
    function a() {
      $('body').on('click', '.lightbox-added', function() {
        if($('.mfp-bg').length >= 1) {
          $('html').css("overflow-y", "hidden");
        } 
      });
      
      $('body').on('click', function() {
        setTimeout( function() {
          if($('.mfp-bg').length == 0) { 
            $('html').css("overflow-y", "scroll");
          }
        },500);   
      });
    }
  a(); 
})(jQuery);
</script>
<?php
}

to quick css: (and maybe for you directly a gloom out of that mfp content:

.mfp-iframe-holder .mfp-content {
    max-width: 80vw !important;
    box-shadow: 0 0 40px #77c84c;
}

2) you can do it via external script and enqueue it – or load it via child-theme functions.php:
( if it needs jQuery it looks a bit different)

add_action( 'wp_footer', 'ava_custom_script' );
function ava_custom_script() {
  ?>
  <script type="text/javascript">
              // CODE HERE
  </script>
  <?php
}

you can add tags in the head area by child-theme functions.php:

add_action('wp_head', 'add_to_head');
function add_to_head(){
?>
  <meta name="theme-color" content="#77C84C">
  <meta name="msapplication-navbutton-color" content="#77C84C">
  <meta name="apple-mobile-web-app-status-bar-style" content="#77C84C">
<?php
}

Aha sorry then i believe i miss-understand his request. But then the mention of the demo page was misleading.
He wants to overlap a container downwards.

maybe this could be a good variant of your logo:

it is transparent – but with background like menu background.

and there is a little transparency between the image on top and the navigation – is it intentionally this way ? – if not :

#wrap_all > img {
    vertical-align: top;
}

it will look like this :

By the way – i remember that lightbox is changed a bit in his header.php settings.
Do you have in your child-theme a header.php file from former enfold installations?

This might be a reason for it too!
If you updated to the new Enfold and forget to renew the old header.php in the child theme.

If you got an older header.php in your child-theme – make a backup before uploading the new one – because there must be a reason for to have there a child-theme header.php. Some adjustments for your theme etc. pp