mp4 video in modal window

Hello,

Currently the lightbox doesn’t support ability to show local videos (it can show YouTube, Vimeo, Vine, Metacafe videos). We will add support of local videos into the next major version. Suppose it will be available within 2 weeks.

Hello,

v. 1.2.4 can open MP4 video files into the lightbox. For this use the following code:

National Partnership for Environmental Priorities

Thank you, thank you, thank you!!!

mp4 videos launch and play perfectly. The video and audio are perfectly synced.

In trying to call the video from HTML, I am using this method:

<a href="https://172.20.3.101/manufacturing/wp-content/uploads/2017/07/ManufPres_FTL_2016.mp4" class="ari-fancybox"><img src="https://172.20.3.101/manufacturing/wp-content/uploads/2017/07/video-employee-dev-1640x924.jpg" width="100%" /></a>

The image that links to the video (video-employee-dev-1640x924.jpg) enlarges with the video modal window and displays between the video and darkened background. Is there a way to keep the image from being included in the modal, or to make it transparent so that it doesn’t appear?

Here are screenshots that show what I am describing:
Image with photoshopped video button:
https://screencloud.net/v/7mues

Enlarged image (not part of mp4 video):
https://screencloud.net/v/iWYie

Video playing over enlarged image:
https://screencloud.net/v/eQ3Cy

Thanks and regards,
Todd

Try to add data-preview=”” attribute to “A” tag. It will look like:

<a href="https://172.20.3.101/manufacturing/wp-content/uploads/2017/05/manufacturing-pres-2017-opex.mp4" class="ari-fancybox" data-preview="" data-width="640" data-height="400"><img src="image.jpg" /></a>

Thanks! This removed the photo, and that is already an improvement!

It may not be the image that is creating the white box around the video, as the white box continues to appear even after adding data-preview=””.

https://screencloud.net/v/p1bhh

Would you have a suggestion for what CSS to add or modify? It is as if a white box with padding around it is being drawn within the modal video window. I have some custom CSS in my child theme, but it is not extensive, and doesn’t include CSS for .ari-fancybox

Thanks and regards,
Todd

Try to add the following CSS rule to “Style -> Custom CSS” parameter on “ARI Fancy Lightbox -> Settings” page:

.ari-fancybox-video-container {padding:0;}

I applied that, and it worked! It’s a beautiful thing… very professional looking.

On the page containing the video, I applied data-width=”640″ data-height=”360″, and that seems to have matched the video ratio.

Great!!! mp4 videos from the same server as the WordPress instance. They are clean and simple and load with zero lag time.

Thank you very much!!!

You are welcome. If have any ideas how to improve the plugin, share them with us.

PS: If you like the plugin, we would be grateful for a review ??

I just upgraded from ARI Fancy Lightbox 1.2.6 to 1.2.8 and the white box returned. I thought that I may have overwritten an earlier setting, but the above style is still in place:

.ari-fancybox-video-container {padding:0;}

Downgrading to 1.2.6 removed the white box, so things are manageable. I’m wondering if the ari-fancybox-video-container class has changed, or if I’m looking in the wrong direction.

Thanks and regards,
Todd

Hi

Is it possible to see the problem anywhere?