Lightbox is a feature that helps your videos stand out by dimming the background and bringing the video to the centre of attention in a pop-up window. Overlay is displayed on the current page, instead of causing a new page to load up, thus reducing page load time and giving users a smoother browsing experience.
This is what it looks like. Click to open the video in a Lightbox pop-up.
Lightbox was one of the features exclusive to FV Player Pro. This has changed with releasing the version 6.0.4.23 – the feature was moved to the free version of FV Player, now available to everyone.
To turn it on, go to Settings -> FV Player – > Setup tab -> Post Interface Options and check the Enable video lightbox box at the bottom.
Enabling video Lightbox
Using Lightbox with videos
There are two ways to use Lightbox. The first one is easier and is done via the shortcode editor. Just open it and add a new video (or edit an existing shortcode). After you have turned on the feature, you will see a new field in the Options tab – Lightbox popup.
Turning on the Lightbox feature in the Options tab
As you can see, there is a box you need to check to turn on the function on a given video. There are also two fields for setting the dimensions and one for writing a caption. The caption will be shown under the video after the lightbox is opened.
Setting up dimensions
A video with lightbox has two dimension settings. The first one – video dimensions – will determine the size of the lightbox window in which the video will play.
Setting the size of Lightbox window
The second one – lightbox dimensions – will determine the size of the splash image placed on the page.
Setting the size of the splash image
For example: splash image size = 200 x 150; Lightbox video size = 600 x 338. The example shortcode:
[fvplayer src="https://vimeo.com/49760839" splash="https://i.vimeocdn.com/video/343177332-637ae85d6010f2d28feb68e91dfe77b8a7f320f22a67dd20dfeca995c465f56c-d_1920x1080?r=pad" width="600" height="338" caption="Flying Lotus - Putty Boy Strut (Until The Quiet Comes, new album out October 1st/2nd)" lightbox="true;200;150;"]
You don’t need to use an extra plugin for handling the Lightbox for images, our Lightbox feature can easily handle them as well. This reduces the possibility of performance issues and also the risk of security threats. To activate this function, go to Settings -> FV Player -> Sitewide Flowplayer Defaults, scroll down and check the Use video lightbox for images as well box.
Enabling Lightbox for images
You can try it for yourself below (click on the image and start browsing through). In this case, both images and videos are set up to appear in lightbox.
Multiple videos/images with Lightbox function
If you have more than one picture or video on a page, a Next and Prev button will appear as you hover the mouse over the Lightbox pop-up. This will enable you to easily cycle through the videos.
Playlists in Lightbox
You can use the Lightbox on a video playlist. Just create one using any of the available styles and turn on the Lightbox popup in the Options tab of the shortcode editor. add the line lightbox=”true;” into the shortcode. For example:
( function() { var el = document.getElementById( 'wpfp_fd6dff07cf05dd2dd4a6c08df5302520_playlist' ); if ( el.parentNode.getBoundingClientRect().width >= 900 ) { el.classList.add( 'is-wide' ); } } )();
The used shortcode:
[fvplayer src="https://vimeo.com/49760839" splash="https://i.vimeocdn.com/video/343177332-637ae85d6010f2d28feb68e91dfe77b8a7f320f22a67dd20dfeca995c465f56c-d_1920x1080?r=pad" width="600" height="338" playlist="https://vimeo.com/180350618,https://i.vimeocdn.com/video/588926490-146d5225385c5e379beaa8fde4cbe6e50c452414d1ef4eaa823e1cd52dda36df-d_1920x1080?r=pad;https://vimeo.com/78740926,https://i.vimeocdn.com/video/454850405-dedd0018826711fe784f4605d6be7e07b6dddca8d06f8b39ec09f312d9dd6e8f-d_1920x1080?r=pad" caption="Flying Lotus - Putty Boy Strut (Until The Quiet Comes, new album out October 1st/2nd);Great Lakes, Bad Lines - Full Film;John Lewis - The Bear & The Hare" lightbox="true;"]
Anchor text with Ligtbox
The FV Player shortcode can be used to create a simple text link which will open a video in Lightbox after clicking on it. To do this, just create a regular video shortcode and add these parameters into it:
lightbox="true;text" caption="{Your Text}"
Here’s an example, just click on this link to see the video. This is the shortcode of the example above:
[fvplayer src="https://vimeo.com/155072182" lightbox="true;text" caption="click on this link" splash="https://i.vimeocdn.com/video/555742790-2ea9159bd2ffa63e11ee8239e47f370e61b6a55fadd7fb4ece24ddda1529a73b-d_1920x1080?r=pad"]
Image with a video Lightbox popup
This is a bit more advanced. There is a possibility of creating a video lightbox popup that emerges from an image, which might be useful for creating simple buttons. To do it, add a video with a splash image, preferably in PNG format, then add a line to the shortcode specifying the lightbox function. For example:
[fvplayer src="https://vimeo.com/155072182" splash="https://cdn.foliovision.com/images/2016/05/fv-button.png" lightbox="true;400;149" caption="The San Gabriels in 4K"]
You will need to update the CSS style sheet in your theme settings with this code to achieve the transparency of a button:
Note: For this to work, the above HTML code must be part of the post content. If you use it directly in your template, you have to apply the the_content filter on it:
This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.
Necessary Cookies
Strictly Necessary Cookie allow you to log in and download your software or post to forums.
We use the WordPress login cookie and the session cookie.
If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.
Support Cookies
Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.
We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.
Please enable Strictly Necessary Cookies first so that we can save your preferences!
3rd Party Cookies
This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.
Keeping this cookie enabled helps us to improve our website.
We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.
Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.
Please enable Strictly Necessary Cookies first so that we can save your preferences!
Leave a Reply