Video Lock not show up the "Close Button"

Support
#1

Hello,

Video Lock not show up the “Close Button” even i already tick to enable it. I want to show it so that user can click to dismiss it. See this:


Please Help ASAP.

Thank you,
Sovann

#2

Hello,

I see it. But it is not in the line as it is supposed to be. I want the Close Button to appear on the top right corner of the popup video edge.

Check it here: https://activerify.com/website-design-development

Please help.

Thank you,

#3

Hi There,

To move the close button inside the video popup, we have to use the custom Javascript. Please add this custom JS under Theme Options > JS:

jQuery(".x-video-lock-close").detach().appendTo('.x-video-lock');

After that, we have to use the custom CSS to change the color & position of the close button(it’s currently grey and stays on the left). Please add this custom CSS under Theme Options > CSS:

.x-video-lock {
    position: relative;
}

a.x-video-lock-close {
    z-index: 99999;
    color: #000;
    right: 0;
    top: 0;
    left: auto;
}
a.x-video-lock-close:hover {
    color: grey;
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Hope this helps!

#4

Hello,

The Close Button how appeared on the top right corner of the page. It is not appeared on the popup as i want it to be. i did share with you my site credential in security note.

Please Help.

Thanks

#5

Hi,

Please change JS code from

jQuery(".x-video-lock-close").detach().appendTo('.x-video-lock');

to this

jQuery(function($) {
    $('.x-video-lock-close').insertAfter('.x-video-lock-btn-wrap');
});

Hope that helps

#6

Still not work.

#7

Hi There,

I would like to check your website but the username or password is incorrect.

Could you please double check?

Many thanks.

#8

Hi,

Thank you for providing your login credentials.

Kindly remove the js code then add this in Theme Options > CSS

a.x-video-lock-close {
    top: 30px;
    left: calc(50% + 200px);
}

Hope that helps.

#9

Thank you.

I see it, but the button shows behind the video.

I also want the background of the full screen popup to be transparent. currency showing black.

Help.

#10

Hi There,

I’ve changed the the custom JS to this:

setTimeout(function(){
  jQuery(".x-video-lock-close").detach().appendTo('.x-video-lock');
}, 11000);

And also add this custom CSS again:

.x-video-lock {
    position: relative;
}

a.x-video-lock-close {
    z-index: 99999;
    color: #000;
    right: 0;
    top: 0;
    left: auto;
}
a.x-video-lock-close:hover {
    color: grey;
}

The close button looks good now:

Please try adding this custom CSS:

.x-video-lock-overlay {
    background-color: rgba(0, 0, 0, 0.25);
}

Let us know how it goes!

#11

Amazing! Works very well. Thanks

#12

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.