Placing Button on Video in Header-Section

Hi,

i have uploaded a video and placed it into my headder. is there a way to place a button in the middle of the video? like it appers in the “Front page header type” -> Full screen slider?

otherwise the page visitor won’t notice that they can scroll down.

www.zeki-hairdesign.de

thanks

Hello there,

To achieve it, you’d need to add custom jQuery code by doing the following 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($){
      
  var buttonURL    = '#primary';
  var buttonLabel  = 'Click to begin';
  
  var heroContent  = '<div class="slide-inner">';
      heroContent += '<a href="'+buttonURL+'" class="roll-button button-slider" target="_top">'+buttonLabel+'</a>';
      heroContent += '</div>';

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

})(jQuery);

  1. Update

To adjust the button’s position, you’d add this CSS code into your site’s additional CSS option under Appearance > Customize > Additional CSS.


.slide-inner {
  top: auto;
  -webkit-transform: unset;
  -moz-transform: unset;
  -ms-transform: unset;
  -o-transform: unset;
  transform: unset;
  min-height: auto;
  bottom: 20%;
}

Regards,
Kharis