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=”http://www.vicdorfman.com/wp-content/uploads/2014/05/alycia.jpg” placeholder_width=”604″ placeholder_height=”338″ align=”left”]
[/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.
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:
*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:
MyElement1
MyElement2
MyElement3
MyElement4
…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.
