Video Lightbox formatting

Support
#1

Hi there, I’m having a bit of trouble customising the lighbox for video:

Would like to make the “x” to close a bit bigger and close to the video
not displaying the loader (it doesn’t look great)
not displaying previous and next
change the background colour

I look through different tutorials and the X theme documentation and didn’t find the answer… any help welcome!

Thanks in advance

B.

#2

and also to add a play icon when you hoover over the image src!

#3

Hello @blatix,

Thanks for writing in! Are you using the legacy shortcode for image and video lightbox?

We highly recommend that you use the Content Area Modal instead. You will have more control over the element, the toggle and the Close button when using the content area modal. Please check out this documentation:

Hope this helps.

#4

Thanks for the answer, the modal area was my first idea, but when you click out of the modal area the embedded video doesn’t stop playing automatically like a normal lightbox…

#5

Also it doesn’t seem to be responsive for mobile devices, in portrait mode, the video is cut in half…

here is the website:
theproductioncompany.ie

the password to overwrite the ‘under construction’ is: thepros

#6

Hello @blatix,

Your margins seems too big. Can you please make it smaller? If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

#7

Hi and thanks for the reply. Below are the credentials to log in.

What I have to solve is the following:

  1. how to add a play icon on hover
    3)how to make the video autoplay (it is embedded with the autoplay function)
  2. make it responsive for mobile devices… Ideally in mobile devices would be great if it defaulted to full screen as soon as you click on the image (is this even possible?).

Thanks in a advance

Summary

login: admin
password: Pojcob-hurguw-8sasda

#8

the link is as follows:
theproductioncompany.ie

#9

Hi @blatix,

Thank you for the credentials, but what is your login page? /wp-login.php and /wp-admin does not work.

Regarding your questions: 2 and 3 can be solve with your video embed code, when you copy the embed code from vimeo, please select the Responsive on the Size option and check the Autoplay this video checkbox.

For number 1, please add this to the Page > CSS

.playbutton .x-graphic:before {
	content: "\f144";
    display: block;
    position: absolute;
    margin: -36px 0 0 -35px;
    top: 50%;
    left: 50%;
    width: 70px;
    height: 70px;
    font-size: 42px;
    line-height: 72px;
    text-align: center;
    text-shadow: 0 0.035em 0 rgba(0,0,0,0.35);
    vertical-align: middle;
    color: red;
    border-radius: 100em;
    opacity: 0;
    -webkit-transition: opacity 0.75s ease;
    transition: opacity 0.75s ease;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.playbutton:hover .x-graphic:before {
	opacity: 1;
}
.playbutton:hover .x-graphic-image.x-graphic-primary {
	opacity: 0.25;
}

Then apply a class playbutton to each of your Content Area Modal.


Please keep in mind though, that this is now in the realm of customization which is outside of support that we can offer. The CSS code provided above is only a guide and its now your responsibility to modify it to suit your needs.

Thanks,

#10

Hi Friech,

Thank you so much for your help, very much appreciated. All sorted form here.

#11

You’re most welcome, @blatix.

#12

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