Call to action buttons visible when having a video banner

Dear,

Is it possible to get the call to action buttons active when having a video banner?
I tried my self using css but it didn’t work out so well…
website: https://www.crystalpurewater.eu
Kind Regards,

Kevin

Hello Kevin,

To add buttons on video header, try doing 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"
      if( $('.video-container').length ) {

        var button1Text = 'Button One';
        var button1URL  = '#';

        var button2Text = 'Button Two';
        var button2URL  = '#';

        $('.video-container > div').append('<div class="header-info"><div class="header-buttons"><a class="button header-button left-button" href="'+button1URL+'">'+button1Text+'</a><a class="button header-button right-button" href="'+button2URL+'">'+button2Text+'</a></div></div>');

      }

    })(jQuery);
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .video-container > .wp-video {
      position: relative;
    }

    .video-container .header-info {
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    .video-container .header-info .header-buttons {
      margin-top: 0;
    }

Regards,
Kharis

1 Like

Dear Kharis,

Your the best, Thank you!

Kind Regards,

Kevin

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

1 Like

Dear @kharisblank,

How to get the button redirect to the first media section?

I called the first media section “1e”


I let the button redirect to “1e”

This is what happens

Kind Regards,

Kevin

Hello there,

From your site’s dashboard, visit Appearance > Customize > Header area > Header text; and enter https://www.crystalpurewater.eu/#pg-220-2 for Left button URL option.

Regards,
Kharis

1 Like

Dear @kharisblank,
Thank you it worked!
I needed to set it by javascript because the buttons are normally not visible on a video header.

Kind Regards,

Kevin

You’re welcome Kevin!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis