PRO | How to pop up a video lightbox?

[pamadesign]

Hi there,

I found a topic in the support forum, where I was able to create a video Lightbox with this code in a RAW Element:

[image class=“videoLightbox” src=“XX” link=“true” href=“YY” lightbox_video=“true”]

[lightbox selector=".videoLightbox" deeplink=“true” opacity=“0.875” prev_scale=“0.75” prev_opacity=“0.75” next_scale=“0.75” next_opacity=“0.75” orientation=“horizontal” thumbnails=“false”]

The result looks like that:

But i have two things I’m not happy with:

1. The video opens in a carousel
2. The lightbox is fullscreen

I had more something like a pop up in mind, where each Video on the site has its own pop up…
Does that makes sense to you?

Cheers, Pascal

[ruenel]

Hello Pascal,

Thanks for writing in!

To prevent from displaying the other videos in a carousel, you must have different classes for your image. For example;

1st Play Button:

[image class="videoLightbox-1" src="X" link="true" href="#" lightbox_video="true"]

[lightbox selector=".videoLightbox-1" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="false"]

2nd Play Button:

[image class="videoLightbox-2" src="X" link="true" href="#" lightbox_video="true"]

[lightbox selector=".videoLightbox-2" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="false"]

Using the respective lightbox shortcode will display the lightbox in fullwidth. That is the layout of this lightbox shortcode.

If you want to have a different style, you can utilize the content area modal element and global block. You can check out the secure to see the example that I created.

How did I do it?

• I went to the Pro > Global Blocks and I created a simple block composed of just a section, row, column and a video element.
• I created a test page and insert a content area modal element.
• In the Content Area > Toggle > Graphic tab, I selected “Image” as the type and then inserted the play image at the bottom.
  
• I used the Global Block shortcode in the content area modal element content

Hope this makes sense.