Can I use magnific-popup to display an MP4 video?

Question

I would like to use magnifico-popup to display a locally hosted mp4 file.

Do I need to define an iframe pattern for this or is there a simpler option.

Many thanks for your thoughts

Anita

Enormous

Answer 1

You'll need to integrate some third-party video player, for example http://mediaelementjs.com/

I'd recommend to use inline type of popup, as it allows you to open in popup any HTML code. http://dimsemenov.com/plugins/magnific-popup/documentation.html#inline-type

Related example: http://codepen.io/dimsemenov/pen/GtjBb

Uno

Thanks Dmitry for your answer, I struggled a couple of hours with your solution, I will suggest that they call the mediaelement plugin inside the open() callback of Magnific popup to make it work without problems. – Vitrification

@AdanArchila Tried initializing MediaElement with callbacks: { open: function() {} } - not working. Can you share your code? That would be great. Thanks! – Tova

@Ihor-paspar2.com I can't paste code here in the comments, so I just forked Dmitry codepen and modified the callbacks, please only check the javascript is not a working example, I just wanted to paste my javascript codepen.io/adan/pen/gpjwVw – Vitrification

@AdanArchila thanks for the code, it shreds some light on proper js code. Another question - your .open-popup-link which opens Magnific, is it linked to mp4? What is passed to Magnific as inline content - just the url or full <video></video> tag? – Tova

In my project I passed the ID of a div, this div looks something like this: <div class="video-player mfp-hide" id="video-player-832"><div class="video-player-container"><video></video></div></div> – Vitrification

Answer 2

You can use the type of content - iframe to open MP4 video:

<a class="mfp-iframe" href="MP4_VIDEO_PATH">Open MP4 video in iframe</a>

Pemphigus

Answer 3

I'm going to add a comment here in response to Sky Yip because that solutions works beautifully EXCEPT that it doesn't work in Safari which is obviously a problem. More details here: https://github.com/dimsemenov/Magnific-Popup/issues/1149

Abstinence