Video Overlay

I would like to overlay the logo, site info, and site description over the video but I’m not seeing where there is an overlay for videos. I see the code in the header.php but when I put in what I think should work, it doesn’t. Please assist.

http://chet.toucodev.com

I have to remove the video for my client but I want the logo and site information as an overlay over the video header.

Hello there,

You can use the following CSS code and apply it on your site via the customizer’s additional CSS option which resides under the Appearance > Customize > Additional CSS.


.site-header {
  background-color: rgba(0,0,0,0.4);
}

Adjust the value if needed.

Regards,
Kharis

I’m not sure if we are on the same page with this.

I want to use a video header, but I would like to add my logo and site information as an overlay over the header just like the slider header. I need it to look like the header of http://sustainablebusinesspartners.com

Please let me know how to have both in the header with a video.

I need it to look like this. http://imgur.com/a/egg2i

Hello there,

The solution for such that objective is adding a couple of jQuery code to insert new HTML markup to overlay the video header area and add some content inside it. Please follow the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

(function($){
      
    "use strict"
    
    var siteAddr     = $('site-header .col-md-4 a').attr('href');
    var siteTitle    = $('.site-logo').attr('alt');
    var imgURL       =  'http://chet.toucodev.com/path-to-your-logo.png';
    var subTitle     = 'Subtitle goes here';
    
    var heroContent  = '<div class="slide-inner">';
        heroContent += '<div class="contain text-slider">';
        heroContent += '<div><a href="'+siteAddr+'"><img src="'+imgURL+'" alt="'+siteTitle+'" /></a></div>';
        heroContent += '<p class="subtitle">'+subTitle+'</p>';
        heroContent += '</div>';
        heroContent += '</div>';

    $('.sydney-hero-area').append(heroContent);

})(jQuery);

The code above duplicates the main slider content markup and insert a new logo image in the imgURL variable.

  1. Update

  2. To disable the default slide content animation, you need to add the below CSS code into your site’s additional CSS option which resides under the Appearance > Customize > Additional CSS.


.text-slider {
  animation-fill-mode: unset;
  -webkit-animation-name: unset;
  animation-name: unset;  
}

Regards,
Kharis

Any assistance would be helpful. Thanks!

Oh! Didn’t see your reply. Thanks!

Hello there,

Did it work for you? Please let me know.

Regards,
Kharis