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

我正在用Bootstrap和family/forest一页模板（在themeforest.net上）编程一个网站，我自定义了这个模板的公文包部分，当我们点击缩略图时会有一个视频弹出窗口（而不是原来的完整图像弹出窗口）。

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

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

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

您只需要下面的代码，并尝试分析我上次关于Vimeo的问题MAGNIFIC-POPUP：使用magnetic弹出窗口在我的网站上嵌入Vimeo视频。如果你在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>

您需要提供到视频的直接链接。在vimeo的情况下，只有当你支付了保费账户时，这才可用。一个解决方案是将视频重新上传到YouTube，然后通过以下操作获得直接链接：

将完整URL复制到YouTube上的视频
安装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>

来自文档。还有这个问题。

相关内容

最新更新

热门标签：