Looping video thumbnail and popup video Vimeo Lightbox

[OneManCrew]

Hello
I’m really interested in achieving a looping video thumbnail with a play button.
When the user clicks the play button a video Lightbox pops up.

An example of this can be seen on the https://theme.co homepage
Here is a screenshot of the part I love and want to use on my own website.

How can this be achieved with using X theme?

Thank you for your help.

[prakash_s]

Hello @OneManCrew,

Thanks for writing to us.

To achieve please follow these steps.

1. Add the video in the column background ad set the background color to the upper layer for video overlay.

2. Set the column Flexbox as ceneter. Please have a look at the given screenshot
   

3. Add the Modal element inside the column.
   

   

4. Set Icon for the Modal toggle
   

5. Now click on the Add element of Modal element and then add Video element.

6. Add the video in the Video element

Hope it helps
Thanks

[OneManCrew]

Thank you Prakash that worked great.

Just one last question please.

How can I resize the video to play larger and remove the white border as seen in my screenshot below.

[prakash_s]

Hello @OneManCrew,

To resize the modal content you need to go to the Modal —>Setup —>Background. To change the Size you need to set the Max-Width.

You can change the padding to remove the border.

Hope it helps
Thanks

[OneManCrew]

One last question please

The video continues to play in the background even when I close the modal Lightbox that pops up.

Is there a way to make the video stop playing when the user closes the modal player?

Thanks again for your help, appreciate it!

[tristup]

Hi @OneManCrew,

The Modal element does not have the option for dynamic rendering as the Content Area Modal, and that is why it is unable to stop the video. Although the Content Area Modal is removed from the element list, the Dynamic Rendering feature is one unique case where the content area modal might still be more useful. You can use the Content Modal Area element, by enabling it from Cornerstone > Settings.

Please note that the point has been already added to our feature request list so it might be taken into account in the future.

Hope it helps.
Thanks

[OneManCrew]

Thank you, the Content Modal Area works but I can’t seem to find how to resize the video player that pops up.

Is there a Max Width option in the setup dropdown, like the Modal element has?

[prakash_s]

Hello @OneManCrew,

You can set the Max width of the content area. Go to the Content Area Modal —>Modal —>Setup —>Modal---->Max width

Thanks

[Oleksii]

Hi! When I mark “show in library”, it not save. Is video element use in modal element not impossible? In this case, I need to use a third-party plugin, right?

[tristup]

Hi @Oleksii,

There is no problem in using the Video element in the Modal, but the Modal element does not have the Dynamic Rendering option which stops the Video while Modal is closed.
If the Show in Library option is not working, please create a separate thread and provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

NOTE: There is a Feature Request for Dynamic Rendering option in the Modal element has been already added.

Thanks

[Oleksii]

ok. thanks

[prakash_s]

You are most welcome @Oleksii