Video Lightbox

Beaver Builder
21

Sorry it doesn’t actually work for me. It just does a page redirect to vimeo instead of lightbox, which tells me the actual plugin is not installed.

22

Hey @Dennis. I am sure you can make the video bigger. I think the best way to do it is to tweak the MagnificPopup CSS. The video itself is fluid width, so you just need to increase the max-width of the container. Try this CSS:

.mfp-iframe-holder .mfp-content {
    max-width: 90%;
}

@Nicholas, hmm, are you using the Beaver Builder theme? There is a setting in the theme settings that needs to be enabled or the code snippet won’t work. It’s the lightbox setting: Content -> Lightbox.

If you’re using the Beaver Builder theme and the lightbox is enabled, it should work. It sounds like there might be a Javascript error. If that’s the case, can please start a new support thread. We can help out there. :slight_smile:

23

Thanks Robby, that’s perfect :slight_smile:

24

Hi Robby, I didn’t realize this was only theme related. The answer is no. We just have the standard builder license.

Is there a way of adding this to the builder as well rather than just the theme because it would be so useful.

Also could there be a way in the builder to add a poster image for videos that are from youtube and vimeo rather than just the hosted ones?

25

Hi Nicholas! This is the jQuery popup script we’re using:

http://dimsemenov.com/plugins/magnific-popup/

You can still use this with your theme, you just need to enqueue it manually. It won’t automatically be included like it would if you’re using the Beaver Builder theme. For reference, here’s documentation on how to do that:

https://codex.wordpress.org/Function_Reference/wp_enqueue_script

Technically, we do include this script in Beaver Builder, but it’s only loaded on pages that use a module that has a lightbox (like the photo module).

For the poster image suggestion, sounds like a good idea. If you have a second, would you mind adding this as a feature request on our User Voice page?

https://wpbeaverbuilder.uservoice.com/

Thanks Nicholas!

26

This is great! By using this method we don’t need to install lightbox or fancybox since this is already included with BB Builder. Now my question is: Have you included the css effects as well? the ones the plugin author samples here http://codepen.io/dimsemenov/pen/GAIkt ), if so, what are the class names? I am guessing that would be used in this line …

mainClass: 'mfp-fade',

Please let me know!

27

Hi Carlos. That’s a good question! To be honest, it doesn’t look like we included the CSS effects. You can find the theme’s version of the magnificpopup css here:

bb-theme/css/jquery.magnificpopup.css

I don’t see the mfp-fade class anywhere. You’ll probably need to add the additional css to your (child) theme.

28

Looks like the script is calling a class that is not defined on the css stylesheet, that’s why the lightbox effect on the website works without any effect despite the fact that the script is calling a fade class

29

Hmm. I would guess that the script has been updated, but we haven’t updated it on our end yet. Thanks for the heads up.

30

Hi guys,

I was wondering if it’s somehow possible to implement a lightbox video for the ‘Button’ module?

Action:
Click Button -> Open lightbox video on page?

31

Hey Michael,

Unfortunately, that’s not possible for now. There is a code above on how to achieve something similar to that though. You can give it a shot. :slight_smile:

Ben

32

Hey Michael,

Yeah, this is doable with a bit of custom code.

If you reference the code snippet I posted above, you’ll want to give a class or ID to the button module, then edit the CSS selector in the Javascript/jQuery code.

I don’t believe there is a way to do this without writing some code, though. Sorry!

33

I’m new to BB and saw this post with code for the Lightbox popup. I’ve tried this and it’s not working. It takes me to the Vimeo page rather than pop up a Lightbox with a video like the photos do. I see I may be missing some id information. Not sure how that works. You can see the page here - http://www.telestorypictures.com/ec15/gallery/videos/

Any ideas?

Thanks!

34

Hi, everyone, I am new at this and so a bit confused. I know this question was asked and answered. For some reason I just don’t seem to be able to filter what really is the answer. I woudl like to know how to set up an image or text link to open a lightbox video? Can some one point me to a step by step article? I have BB Pro Edition.

35

Hi all, How do I get my home page image to fill the header menu. Similar too this one featured of the BB site.
https://www.thenewhuman.com/
I was using another theme before BB and it was there, When I switched over, it all went along with some of my content.

36

Hey St. Clair,

Just letting you know this involves a bit of custom coding. Dennis put it all together on his reply below(same thread). :slight_smile:
http://forum.wpbeaverbuilder.com/support/q/video-lightbox/#post-36942

Edit: I’ve answered your other question on this other thread you’ve posted on as well.

Ben

37

So just to clarify, the code that Dennis put together is only an option if we are using the BB theme? If this is the case, what other options are there??? I am using the “Tesseract Theme” with the BB Pro builder and every time I try and build a video Lightbox (eg Lightbox plus Colorbox plugin) the video just goes full screen. I am very new to Wordpress but seems like there should be a BB module included to do this. I know for me (total nuf nuf) it would be a much loved addition.