How do you create a video lightbox (like you use on the ? in the Builder when you click on the ‘watch the video button’.
I’d like to be able to add this to a BB button/link but can’t work out how to achieve it.
Thanks
Hey Dennis,
I’ve already assigned another member of the team to assist your with your concern.
Ben
Hi Dennis! Glad to hear you like our video lightbox! 
We wrote a bit of custom code to get the lightbox working. First, we’re using the Magnific Popup jQuery plugin:
http://dimsemenov.com/plugins/magnific-popup/
Then, we have this code in an HTML module on the homepage:
<a id="fl-homepage-video" href="https://vimeo.com/122546221"><img src="http://forum.wpbeaverbuilder.com/wp-content/uploads/2015/01/beaver-builder-screenshot.jpg" /></a>
<script type="text/javascript">
jQuery( function(){
jQuery( '#fl-homepage-video' ).magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
fixedContentPos: false
});
});
</script>
Hope that helps! Let me know if you have any other questions.
Ahh, not so simple. Thanks for giving me tips on how to get it to work.
Adding a video popup to BB plugin would be a great addition - I think a video popup is way more useful than an image pop up. I’m sure many BB users would love this addition and would take full advantage of it to promote their work or make offers
Cheers
Sure! That is a good suggestion. We’ll definitely keep it in mind!
Let me know if you’d like some help getting an overlay setup on your site. I’d be happy to work with you to get it working.
I could definitely do with your help in getting this working. If I setup a test site could you tell/show me how?
Sure! If you can set me up with an admin login and FTP I can walk you through it!
Great. Thanks Robby. I’ll set up a site and give you details soon.
[Content Hidden]
Hey Dennis! Thanks so much for setting all this up. So, it’s actually a bit easier than I thought. In the Beaver Builder theme settings, by default we have the Magnific Popup script loaded. For the record, you can disable it by going to Content > Lightbox in the theme settings.
As long as it’s enabled, you can just copy paste the code from above into an HTML module and it will work. You’ll probably want to replace the image and the video with your own. Checkout the homepage on the site you setup for me to see it all in action!
Hey Robby,
That is excellent
You inspired my to test it out & I thought I’d add it here to share with others who might be interested. More people need to know this!!
The icing on the cake will be if you and the team can make it possible for us to add video lightbox to buttons. (on a side note: I put in a request a few months ago, but I’d really like the option for the rollover effect on a transparent button to be solid…but I digress)
I’d like to suggest the idea that there’s a weekly “how to” post on your blog. There is so much BB can do and I’m sure many of us are just scratching the surface. Anyway here it goes (if I’ve done any mistakes please correct…)
VIDEO LIGHTBOX USING AN IMAGE
<a id="add-your-id-01" href="https://VIMEO-URL"><img src="IMAGE-URL" /></a>
<script type="text/javascript">
jQuery( function(){
jQuery( '#add-your-id-01' ).magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
fixedContentPos: false
});
});
</script>
<a id="add-your-id-02" href="https://YOUTUBE-URL"><img src="IMAGE-URL" /></a>
<script type="text/javascript">
jQuery( function(){
jQuery( '#add-your-id-02' ).magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
fixedContentPos: false
});
});
</script>
VIDEO LIGHTBOX USING TEXT
<a id="add-your-id-03" href="https://youtube.com/watch?v=SCFxTu1Fq3s">ADD YOUR TEXT</a>
<script type="text/javascript">
jQuery( function(){
jQuery( '#add-your-id-03' ).magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
fixedContentPos: false
});
});
</script>
VIDEO LIGHTBOX USING VIDEO HOSTED ON AMAZON S3
Note:
- The folder name on Amazon s3 must end as a URL. For exmple I create a folder with my URL at end. name.myurl.com
- I then put another folder inside the one above. This can be called anything.
- Upload my video.
- Once video is uploaded, change the permissions of the file to Group: All user - Read Only (see screenshot: http://imgur.com/OrNpmXI)
Method to change the permissions varies depending on the tool you’re using to access file on Amazon S3
If using Amazon Console check this out
<a id="fl-homepage-video-4" href="http://name.myurl.com.s3.amazonaws.com/Folder-name/video-file.mp4">ADD TEXT or IMAGE URL</a>
<script type="text/javascript">
jQuery( function(){
jQuery( '#fl-homepage-video-4' ).magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
fixedContentPos: false
});
});
</script>
Dennis, thanks so much for putting this all together. I love the “How To” blog post idea. Maybe we can borrow some of your example code here for the first post?
Hey Dennis,
We’ve a KB article showing how to achieve the transparent button solid hover effect. Check the link below. We’re adding stuff there as we go as well.
http://forum.wpbeaverbuilder.com/knowledge-base/transparent-button-with-solid-color-hover-2/
Ben
Robby, Please do use in the “how to” post - would be an honor
Ben,
Thanks so much for sending me this link. I’m looking forward to testing this out.
Hey Dennis,
No worries! Enjoy BB!
Ben
Hi Robby,
Is there a way to make the video popup larger? I was wondering if the popup could cover most of the browser window as it’s responsive so adjusts for different sizes. Plus more detail can be seen without having to make the video full screen.
Cheers
Can you help me with getting the Magnific Popup jQuery plugin as when I visit the authors website it says is in beta so there isn’t a way to download it and also when I search wordpress.org there is nothing there
Hi Nicholas,
It’s already built in.
So all you have to do is add the following code (example from Robby) into an HTML module.
<a id="fl-homepage-video" href="https://vimeo.com/122546221"><img src="http://forum.wpbeaverbuilder.com/wp-content/uploads/2015/01/beaver-builder-screenshot.jpg" /></a>
<script type="text/javascript">
jQuery( function(){
jQuery( '#fl-homepage-video' ).magnificPopup({
type: 'iframe',
mainClass: 'mfp-fade',
fixedContentPos: false
});
});
</script>
If you look at previous message I added some templates for different types of videos.
Hope this helps.
Thank you, I thought it needed installing the plugin