Youtube Lighbox inside the Creative Columns 4

[Haz]

Hello, hope you all are well!
Im having a little struggle with lightbox and hope that you could help me.
I have downloaded the creative column 4 from design cloud and its amazing.

After setting it up, it does everything i need except for one thing, i cant figure it out
Could you please tell me how do i make a lightbox appear with a youtube video so website visitors could watch video form the same page without leaving the website?

Hope you can help me with this innovation, thank you!

[ruenel]

Hello @Haz,

Thanks for writing in!

To have a lightbox for your videos, please remove the button “+” element. You will need to insert a content area modal element instead. You can edit the toggle icon and make sure to display the “Youtube” or “Video” icon and then insert the Youtube embed code in the modal content.

Hope this makes sense.

[Haz]

Hey Ruenel,

Thank you so much for the support, it does exactly what I need, except it has few design issues.
When I click the Content Area Modal, lightbox doesnt open in the middle of the website but on the right side instead, it also has white frame on the left side of the lightbox which is strange

I also faced an icon issue, I was able to change the icon, but its inside the borders of the modal, tried to make it transparent but it hardly helped, i also was not able to center it. Could you please help me replicate the same design like in a button and center it?

Thank you so so much!

[marc_a]

Hi Haz,

I just check your video editing page and I don’t see any content modal popup on that page and the video icon is just centered. Did you do it on another page? If yes, can you please provide us the URL and WordPress credentials in a Secure Note so that we can check on them?

Thank you.

[Haz]

Hey Marc,

Fixed the issue, could you please look into it again, thank you again for your help!

[ruenel]

Hello @Haz,

The page is still using a button and not a content area modal.

This could be because of caching and what we are seeing is the WP Rocket cache. To better assist you with your issue, kindly 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
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[Haz]

Dear Ruenel, I have intentionally left button for an example, content model is just below it, you can even see it on screenshot you took. Circle with black youtube logo in it, please look at the bottom left corner of Chef Vineet Bhatia video, it’s right there. Thank you

[marc_a]

Hi Haz,

Thanks for pointing out where we could test the issue!

The reason why the content modal video is not centered because the iframe width is set to 1280px.

In order to fix your issue, you need to set the iframe width to 100% so that it will fit inside the content modal. If you are adding the iframe, I suggest that you set the width to 100% in my screenshot above, or you may add the code below in your Pro > Theme Options > CSS.

.x-modal-content iframe {
	width: 100%;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

[Haz]

Alright, looks like this didnt fix it.

Heres how it looks on mobile:

How it looks on pc:

I will attach my details in secure note just in case

[ruenel]

Hello @Haz,

The width of the modal content is based on the width of its content. With the iframe in it, you will have to set a minimum width. To do this, you will have to insert an inline element CSS in the content area modal element settings, Content Area > Customize > Element CSS;

$el .x-modal-content{
  min-width: 70vw;
}

I have an example in your element. Please check it out.

[Haz]

Hey Ruenel,

works decently now, the iframe.

Could you advise on how to replicate the same design?

I tried configuring everything, but it seems like the icon can be designed only from inside the circle. Is there any way to have icon popping out only? Also how do I make it fade in when you hover over the picture?

Thank you so much

[ruenel]

Hello @Haz,

You need to set the width and height of the Content Area Modal > Toggle to auto and remove the background color. Just set it to transparent.

And then find the Graphic Icon option and change the font size. Make sure that the color is set to white.

Please check the example now.

[Haz]

Hey Ruenel,

Thank you so much for your help, it looks perfect and im so happy with the result.

Wish you and your team all the best, amazing work!

[tristup]

Hi @Haz,

Glad that we are able to help you with this.

Thanks