Wistia Video is not working in fancybox

[sushmak02]

Describe the bug I want to display the Wistia video in the Lightbox. I am passing this URL in the href - https://fast.wistia.net/embed/iframe/gyvkfithw2

But this error appears - https://cl.ly/07a41ca629c8

To Reproduce Steps to reproduce the behavior: Add this HTML - Click Here Call fancybox() in JS - $( '.fancybox' ).fancybox();

Expected behavior Youtube and Vimeo videos are working as expected. The Wistia video should also work.

Screenshots https://cl.ly/07a41ca629c8

[fancyapps]

Hi,

Sorry, wistia is currently not supported. To be honest, I have never heard of that platform before. I am not sure if it is even possible to dynamically embed their videos.

[sushmak02]

Hello,

Thank you for the quick reply.

It is easy to embed the Wistia videos. Here you can read the related docs - https://wistia.com/support/developers/embed-options https://wistia.com/support/developers/iframe-embed-options

Can you please consider this option as a future improvement to the Fancybox? We are using the Fancybox JS to create a widget for the Elementor page builder.

We have created a Video gallery widget to display the videos in the Lightbox. We are working on adding support to the Wistia along with Vimeo and YouTube.

As many users have already asked for this integration so, we are looking into this. Let me know if there is any scope to add support for this.

[fancyapps]

You see, it is quite easy to take youtube and vimeo video URL, for example, https://www.youtube.com/watch?v=KDPja9lNeEc , extract video ID (in that example it would be KDPja9lNeEc and use it to generate iframe embed code (for example, <iframe src="https://www.youtube.com/embed/KDPja9lNeEc"></iframe>). But I just do not see how this could work for Wistia.

On the other hand, fancybox supports iframes which allows you to display any HTML content (pdfs, videos, docs, ...). And for Wistia you could create links like this:

<a href="//fast.wistia.net/embed/iframe/avk9twrrbn?autoPlay=true" data-fancybox data-type="iframe" data-width=730 data-height=411 >Open Wistia Video in Fancybox</a>

Demo - https://jsfiddle.net/hosL9emy/

[sushmak02]

Thanks @fancyapps,

We have used the iFrame option to play the Wistia video in the Lightbox. And it's working fine! We are just facing the issue with the iframe height and width, as we need to give the height and width manually.

[fancyapps]

Well, you did not provide any details about your width/height issues, but you can set iframe dimensions either using CSS or JS https://fancyapps.com/fancybox/3/docs/#iframe

[pmullins-opentext]

This is the workaround I found: https://codepen.io/fancyapps/pen/NgKNRz?editors=1010 But would prefer a native solution triggered by a data attribute instead for iframe videos.

[fancyapps]

@pmullins-opentext Sorry, but I could not understand your comment at all. Is your comment related to Wistia videos or what? That codepen demo was for created older versions of fancybox where video dimensions were not calculated based on aspect ratio, but this has been implemented in the base code long time ago.

[pmullins-opentext]

Right. How do I display a non YouTube/Vimeo video using an iframe at 16/9?

[fancyapps]

Well, there is currently no option for that, but you could trick the script to make it work, something like this:

$('[data-type="iframe"]').fancybox({
  beforeLoad : function(instance, current) {
    current.contentType = 'video';
    current.opts.ratio = 16/9;
  }
});

[pmullins-opentext]

Nice! Thanks! Ideal if base code handled with additional data attributes to avoid extra code, but much appreciated.

[mjcampagna]

As someone that’s used Fancybox 3 since it launched, and have heavily customized my own implementation, I appreciate that the base library does NOT handle your weird video site. That’s bloat that most of us don’t need, and the small amount of code needed for your specific instance is certainly far less than would be needed to handle this natively in Fancybox.