Magnific Popup with html5 video

magnific-popup
Anas Aldrees picture Anas Aldrees · Oct 8, 2014 · Viewed 14.9k times · Source

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

jakecfc1992 picture jakecfc1992 · Oct 9, 2014

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.

Related questions

How to embed youtube video in magnific popup?

i have magnific popup plugin.but it not showing the video on popup How to embed youtube video in magnific popup?

Read More
How to open a magnific popup on page load?

I'm using Magnific Popup and I would like to have a video come up as soon as the page loads in a popup. I got the plugin to work fine, but I have no idea on how to get it …

Read More
Magnific Popup: How to add a custom close button inside a popup form?

I have a form that opens up on a popup and have added a custom close button next to a submit button. This is a jQuery I am using for the close button: $(document).ready(function() { $('#close').click(function() { $.…

Read More