Magnific-popup: popup on a video tag directly

[amir-rahnama]

If you wanna build the popup on top of a HTML5 native video element, is there a way to do this?

The following inline style is _NOT_ working:

$('button').magnificPopup({
    items: {
        src: '<video class="white-popup" src="' + this.video_source + '"></video>',
        type: 'inline'
    }
});

[mhulse]

@ambodi, did you ever get this to work?

[mhulse]

@ambodi, did you ever get this to work?

For future readers, here's how I was able to get it to work:

JavaScript:

$('#foo').magnificPopup({
    delegate: 'a',
    type: 'inline',
    callbacks: {
        open: function() {

            // https://github.com/dimsemenov/Magnific-Popup/issues/125
            $('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:

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

CSS is up to you.

Seems to work pretty good to me.

[sovanna]

thx, it works for me ;)

[Mikdadali]

i got this how to solve this?