West Pro - Cant see headtitle og subtitle when i have a video in my header arear

Hi

So i got two problems when useing a video for my header area.

  1. The headtitle and subtitle is not showing

  2. I cannot disable the pause button. (the user should not be able to pause the video.)

Plz help

Hello there,

By default the header title only appears on the header image. To make it also appears on video header, you’ll need to do some coding works. Firstly you’ll need to add this function to your child theme’s functions.php file. Or you can use the functionality plugin like Code Snippets without running a child theme.


add_action( 'wp_enqueue_scripts', 'west_pro_child_site_info', 9999 );
function west_pro_child_site_info() {

  $west_data = array(
    'header_text' => get_theme_mod('header_text')
  );

  wp_localize_script( 'west-scripts', 'west_data', $west_data );

}

Then do these 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"

  if( $('.site-header').hasClass('has-video') ) {

    var vidHeader = $('.site-header').next('.video-container');

    vidHeader.css('position', 'relative');

    if( vidHeader.length ) {

      $('.video-container video').prop("controls", false);

      var headerContent  = '<div class="header-info"><div class="header-info-inner">';
          headerContent += '<h3 class="header-text">'+west_data.header_text+'</h3>';
          headerContent += '</div></div>';

          vidHeader.append(headerContent);

    }

  }

})(jQuery);

  1. Update

If site caching enabled, you should flush/clear it, otherwise the code additions won’t take any effect.

To disable video control, add this simple CSS code Appearance > Customize > Additional CSS from dashboard.


.video-container .mejs-controls {
    display: none !important;
}

Regards,
Kharis