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

Solution 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

Solution 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>

Comments

[Adan Archila]

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.

[Ihor Vorotnov]

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

[Adan Archila]

@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

[Ihor Vorotnov]

@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?

[Adan Archila]

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>