带有HTML5视频的华丽弹出窗口

Question

如何使用magnific-popup从我的服务器检索和弹出html5视频，而不是从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>

谢谢。

Answer 1

我使用以下链接作为打开视频的方法来工作：

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

然后使用Iframe类型显示它：

$('.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',
        }
});

这是一个非常基本的版本，它在iframe中打开视频，但我还没有弄清楚如何更改高度和宽度等内容。我仍在学习这些内容，所以我不知道它是如何工作的，我只是知道它将视频显示在屏幕上。如果您可以使用它并构建更复杂的版本，请告诉我，以便我改进我的版本。