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

https://kriesi.at/documentation/enfold/logo/#overlap-logo-and-page-content

it would be easier to style it if your logo hasn’t so much transparency left right.

try:

#top .logo,
#top .logo a{
  overflow: visible;
}

.logo img {
    height: 160%;
    max-height: 145px !important;
    max-width: 300px !important;
}

for smaller screens it might be good to have media-querrie instructions.

if it is always the second color-section:

#av_section_2 {
    overflow: visible;
}