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

问题描述 投票:0回答:2

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

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

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

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

html video iframe vimeo magnific-popup
2个回答
1
投票

你只需要下面的代码,并尝试分析我上次qimexswpoi关于Vimeo的问题。如果你在Vimeo遇到我的问题。

MAGNIFIC-POPUP: Embed videos from Vimeo on my site using magnefic popup

0
投票

您需要提供视频的直接链接。对于vimeo,只有在您支付了高级帐户后才能使用此功能。解决方案是将视频重新上传到YouTube,然后通过执行以下操作获取直接链接:

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

如果你想从YOUTUBE或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>

来自$(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

© www.soinside.com 2019 - 2024. All rights reserved.