mermberfix logo x
The MemberFix Team’s got you covered.
Membership plugins

Embedding JWPlayer In An OptimizePress Video Lightbox Element

embedding jwplayer in the optimizepress video lightbox element

One of the most useful elements in the OptimizePress Live Editor is the video lightbox element. It allows you to show a thumbnail that loads a video in a popup lightbox when clicked, like so:

[video_lightbox type=”embed” style=”3″ width=”511″ height=”288″ placeholder=”” placeholder_width=”604″ placeholder_height=”338″ align=”left”]video placeholder - Embedding JWPlayer In An OptimizePress Video Lightbox Element[/video_lightbox]

Unfortunately, the built in video player for the lightbox popup (FlowPlayer) isn’t that good. You can see in the screenshot of the settings below that you’re actually expected to create 3 different video files to ensure compatibility across different browsers.

3 video sources - Embedding JWPlayer In An OptimizePress Video Lightbox Element

Come on… Ain’t nobody got time fer dat. Besides, there’s a better solution. What I discovered is that if you select “embed code”, and paste the JWPlayer code into it, it will work in the lightbox. Score! And that’s exactly what I’ve done in the video at the top of the page.

This means you can say goodbye to the crappy FlowPlayer and simply embed the JWPlayer in the lightbox instead. This is cool because you can make use of the faster, cheaper ‘true streaming’ option available with Amazon CloudFront. It also means that if you compress your videos correctly, you only need to provide one video file that will work across most devices and browsers. You can find the tutorial on compressing, uploading and embedding video files with CloudFront and JWPlayer here (opens in a new tab).

Once you’ve completed the steps in that tutorial, you simply use the embed code in the Video Lightbox element like so:

embed code - Embedding JWPlayer In An OptimizePress Video Lightbox Element

*Very Important!The JWPlayer embed code must be copied & pasted exactly as written. That means adding extra spaces, line breaks, etc., will break the stream! 

Make sure to select a placeholder image file or you’ll wind up with nothing but a “play” button on the screen. Also recall that for every additional video you embed you have to come up with a unique name for the ‘MyElement’ part of the embed code. So if you have 12 videos on your page you’ll need 12 unique names for each ‘MyElement’. I suggest simply naming them in order like this:





…and so on. By the way, this also works with the regular Video Player element and on blog post pages just like this one.

If you have any questions or comments please leave them below. Our commenting system (Disqus) allows you to post images so if you have a specific question that would be easier to answer by including a screenshot, please do so.

You may also enjoy...

WordPress based membership sites have certain requirements, and make use of certain applications that, in my experience, makes most of the popular hosting providers a poor choice.
Learn how to integrate Invision Power System to Wordpress via SSO.
Remember the course roadmap that used to be found inside of the Member Site Academy? Learn how to recreate is using Elementor in this guide!

Stripe integrations can get complicated. So even when you have a pre-made solution, such as the one MemberPress provides, you should set everything correctly to avoid any payment issues. But

Notify of
Inline Feedbacks
View all comments