使用放大弹出窗口嵌入 vimeo 视频答案

【问题标题】：Embed vimeo video using magnific popup使用放大弹出窗口嵌入 vimeo 视频
【发布时间】：2016-08-26 07:24:11
【问题描述】：

我正在使用 Bootstrap 和家庭/森林单页模板（在 themeforest.net 上）编写一个网站，我自定义了此模板的投资组合部分，以便在我们单击缩略图（而不是完整图像）时弹出视频最初弹出）。

弹出窗口与“mfp-iframe”类和“video/video_name.mp4”href 完美配合，因此代码如下：

我不想使用 mp4 视频，而是使用 vimeo 视频，当我用 vimeo 链接“https://vimeo.com/118901221”或嵌入 vimeo 链接“@987654322”替换 href“video/video_name.mp4”时，它不起作用@'

请有人可以帮助解决这个问题。

【问题讨论】：

您是否阅读了创作者页面上的文档？ dimsemenov.com/plugins/magnific-popup/documentation.html
是的，我确定我很好地检查了关于 vimeo 视频的“iframe 类型”部分，但我不明白如何在 html 代码中包含 javscript 模式来设置视频 src。我成功地使用了 'mfp-iframe' 类的 mp4 视频，但如何使用 vimeo 视频？

标签： html video iframe vimeo magnific-popup

【解决方案1】：

你只需要下面的代码，并尝试分析我上次关于Vimeo的问题MAGNIFIC-POPUP: Embed videos from Vimeo on my site using magnefic popup。如果您在 Vimeo 中遇到我的问题。

 <!DOCTYPE html>
    <html>

    <head>
        <title></title>
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Fontawesome -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <!-- Magnific Popup CSS-->
        <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
    </head>

    <body>


        <a class="vimeo-video-1" href="#">CLICK ME TO POP-UP 1 VIDEP</a><br>

        <a class="vimeo-video-more" href="#">CLICK ME TO POP-UP MORE VIDEO</a>

      <!--Jquery -->
        <script src="js/jquery.js"></script>
        <!-- Bootstrap JS -->
        <script src="js/bootstrap.min.js"></script>
        <!-- Magnific Popup JS -->
        <script src="js/jquery.magnific-popup.min.js"></script>
        <script src="js/magnific-popup-options.js"></script>
    </body>

    </html>

    <script type="text/javascript">
        $('.vimeo-video-1').magnificPopup({
          items: [
            {
              src: 'https://player.vimeo.com/video/118901221',
              type: 'iframe' // this overrides default type
            }],
            gallery: {
              enabled: false
            },
          type: 'image'
        });

        //MORE VIMEO VIDEO
        $('.vimeo-video-more').magnificPopup({
          items: [
            {
              src: 'https://player.vimeo.com/video/118901221',
              type: 'iframe' // this overrides default type
            },
            {
                src: 'https://player.vimeo.com/video/211690338',
                type: 'iframe' // this overrides default type
            },],
            gallery: {
              enabled: true
            },
          type: 'image'
        });
    </script>

【讨论】：

【解决方案2】：

您需要提供视频的直接链接。在 vimeo 的情况下，这仅在您为高级帐户付费时可用。一种解决方案是将视频重新上传到 YouTube，然后通过执行以下操作获取直接链接：

复制 YouTube 上视频的完整 URL。
安装 VLC 媒体播放器并打开它。
点击媒体（菜单）...并打开网络流。
在此处粘贴您的视频 URL，然后点击播放。
点击工具（菜单）...媒体信息。您会在那里找到视频的直接 URL。在您的网站中使用它。

如果您想真正从 YT 或 vimeo 嵌入，请查看：

$(document).ready(function() {
    $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,

        fixedContentPos: false
    });
});

<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>

来自documentation。还有this question。

【讨论】：

谢谢，是的，我可以轻松获得视频网址，但问题是如何在华丽的弹出窗口中包含嵌入 vimeo 或 youtube 视频？
它正在重定向到 www.youtube.com/watch?v=0O2aH4XLbto 并且没有出现在弹出窗口中
我必须在哪里准确粘贴此代码？ $(document).ready(function() { $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({ disableOn: 700, type: 'iframe', mainClass: 'mfp-fade '，removingDelay: 160, preloader: false, fixedContentPos: false }); });