Question

我正在使用Bootstrap编程一个网站和家庭/森林一个页面模板（在themeforest.net上），我定制了这个模板的投资组合部分，当我们点击缩略图时（而不是一个完整的图像）有一个视频弹出窗口最初弹出）。

弹出窗口与'mfp-iframe'类和'video / video_name.mp4'href完美配合，所以代码如下：

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

请有人帮忙解决这个问题。

Answer 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>

Answer 2

您需要为视频提供直接链接。如果是vimeo，只有在您支付了高级帐户后才能使用此功能。解决方案是将视频重新上传到YouTube，然后通过以下方式获取直接链接：

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

如果你想从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视频

2 个答案: