Simple and quick lightbox: class=”colorbox” for images

Hello Michael,

I see the logic behind what you tried to do, however at this point the anchor link works only for text items.

<a href="video.mp4" class="colorbox">lightbox</a>

If you want to use an image, then you should be using the [fvplayer] shortcode, as documented here: https://foliovision.com/player/how-to-use-lightbox

Thanks,
Martin

Hello Michael,

we want to improve that, however could you please be more specific about what is the look you are going for? When we improve this functionality, it will look the same. That means a simple image will open a white lightbox overlay when clicked and that will play the video.

Thanks,
Martin

Hello Michael,

you can use any image in the [fvplayer] shortcode, it doesn’t have to be the video thumbnail. Or do you mean that it shows up as a video splash screen for a brief moment when you open the lightbox? Is that the behavior which doesn’t suit you here?

Thanks,
Martin

Hello Michael,

here’s another attempt, please have a look at the “Simple image linking to the video” here: https://foliovision.com/player/demos/flowplayer-lightbox-borders

Is that it? I’m attaching a screenshot: https://foliovision.com/images/support/video-link-opened-in-chrome.png Is that what you are after?

That is not a lightbox however, but a barebones MP4 file opened in the browser. In case the browser doesn’t support the MP4 playback in HTML5 (probably any Linux browser, Firefox on Mac and old Windows, Opera), it would probably show a message to install a plugin to play the video or a download dialog.

So it’s not clear to me why do you want such feature. Are you perhaps using Amazon S3 signed URLs and do you want to generate these for your users for video download?

Please let us know.

Thanks,
Martin

Hello Michael,

I see, so I think I finally understood that you don’t want any play icon on the image which opens the lightbox. So here’s an updated demo: https://foliovision.com/player/demos/flowplayer-lightbox-borders

You mention that our player adds some other things. Does that mean that in your desired lightbox view, there should be no video controls or share bar (can be disabled globally).

Thanks,
Martin

Hello Alden,

sorry about the delay, I was on vacation and our team was bogged down by other work.

You can post your video like this:

`[fvplayer src="{your-video.mp4}" width="640" height="360" splash="{your-button-image.png}" lightbox="true;{button width};{button height}"]`

You also need to include a CSS like this in your theme:

.flowplayer.lightbox-starter .fp-ui {
background: none repeat scroll 0 0 transparent;
}
.flowplayer.lightbox-starter {
background-color: transparent !important;
}

Making it work with a HTML like this is on our list:

`<a href="video.mp4"><img src="image.png" /></a>`

Update: this has been added in FV Player 6.0.5.18

Thanks,
Martin

5 years later and I can’t get it to work either.

I would like to have an image on my website (full screen and with an hover-effect on it) and when the user clicks on it the fv video player pops up in a lightbox.

Adding the class “colorbox”, “lightbox”, “lightbox-starter” and so on doesn’t give me any result.

I can get the video to play in a lightbox with this code:

<a href=”//cdn.foliovision.com/test.mp4″
data-fancybox=”images”
data-caption=”My caption”>

But then the lightbox opens without fv player of course.

How do I achieve this please?

Hello Paul,

if the video has a splash screen, it already looks like an image – the splash screen is the image. It’s the default mode of operation.

If you would like to remove the play button from top of it, you can use CSS like this:

.flowplayer.lightbox-starter .fp-ui > .fp-play {
    display: none;
}

Remember to read the introduction from our guide too: https://foliovision.com/player/advanced/css-tips-and-fixes

Thanks,
Martin

Just noticed that the video lightbox feature is a pro-feature. So I guess there is no way for me to test the fvplayer in a lightbox without paying for the Pro-Version?
Displaying the videos in a lightbox is the only way I am able to built the website as intended. Is there any way for me to test this for free? I’m not willing to pay $75 for test purposes.