magnific-popup - 带有 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 中打开视频，但我还没有弄清楚如何更改高度和宽度等内容。我还在学习这些东西，所以我不知道它是如何工作的，我只知道它会在屏幕上放一个视频。如果你让它工作并构建一个更复杂的版本，请告诉我，以便我改进我的版本。