Magnific Popup with html5 video

Question

How to use magnific-popup to retrieve and popup an html5 video from my server instead of getting the video from youtube, vimo, ...?

<video width="500" height="350" controls>
    <source src="/static/video/bunny.mp4" type="video/mp4" />
        Your browser does not support this video format.
</video>

Thanks.

Answer 1

I have got this to work using the following as a link to open the video:

<a class="popup-player" href="/static/video/bunny.mp4">
 video link
</a>

and then used the Iframe type to display it:

$('.popup-player').magnificPopup({
    type: 'iframe',
    mainClass: 'mfp-fade',
    removalDelay: 160,
    preloader: false,
    fixedContentPos: false,
    iframe: {
        markup: '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
              '</div>',

        srcAction: 'iframe_src',
        }
});

This is a very basic version, it opens the video in an iframe but I have yet to work out how to change the things like the height and width. I'm still learning this stuff so I dont know how it works I just know it puts a video up on the screen. If you get it working and build a more complex version please let me know so I can improve my version.

Answer 2

This worked great for me. Uses "Inline" type with auto-starting HTML5 video.

Javascript:

$('.openVideo').magnificPopup({
type: 'inline',
callbacks: {
  open: function() {
    $('html').css('margin-right', 0);
    // Play video on open:
    $(this.content).find('video')[0].play();
    },
  close: function() {
    // Reset video on close:
    $(this.content).find('video')[0].load();
    }
  }
});

HTML:

<a href="#video-01" class="openVideo">
<div id="video-01" class="video-popup mfp-hide">
    <video preload="false" poster="/videos/01.png">
        <source src="/videos/01.mp4" type="video/mp4">
    </video>
</div>

Original source: https://github.com/dimsemenov/Magnific-Popup/issues/626