使用宏大的彈出窗口嵌入vimeo視頻

我正在使用Bootstrap和家庭/森林一頁模板（在themeforest.net上）編程一個網站，我定製了此模板的投資組合部分，當我們點擊縮略圖時（而不是最初的完整圖像彈出）。使用宏大的彈出窗口嵌入vimeo視頻

彈出與「MFP的iframe」類和「視頻/ video_name.mp4」 HREF完美的作品，所以在這裏的代碼：

我不想使用的MP4視頻，但一個VIMEO視頻當我用vimeo鏈接'https://vimeo.com/118901221'或嵌入vimeo鏈接'https://player.vimeo.com/video/118901221'

替換href'video/video_name.mp4'時，有人可以幫助解決該問題。

來源

2016-05-01 Jah Mik

您是否閱讀過創建者頁面上的文檔？ http://dimsemenov.com/plugins/magnific-popup/documentation.html – mlegg

是的，當然我很好地檢查了關於vimeo視頻的「iframe類型」部分，但我不會誇大如何在html代碼中包含javscript模式設置視頻src。我成功地使用了「mfp-iframe」類的mp4視頻，但是如何使用vimeo視頻？ –

您需要提供直接鏈接到視頻。在vimeo的情況下，只有在您支付了高級帳戶時纔可以使用。解決方案是將視頻重新上傳到YouTube，然後通過執行此操作獲取直接鏈接：

將完整的網址複製到YouTube上的視頻。
安裝VLC Media Player並將其打開。
Hit Media（菜單）...和Open Network Stream。
將您的視頻網址粘貼到那裏，然後點擊播放。
Hit Tools（menu）...媒體信息。您會在那裏找到該視頻的直接網址。在你的網站中使用這個。

如果你想真正從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。

來源

2016-05-01 13:20:24

謝謝是的，我可以很容易地獲得一個視頻網址，但問題是如何在宏觀彈出窗口中包含嵌入視頻或YouTube視頻？ –

它在www.youtube.com/watch?v=0O2aH4XLbto上重定向，而不是在彈出的 –

中出現，我必須在哪裏準確粘貼此代碼？ $（document）.ready（function（）{（'。popup-youtube，.popup-vimeo，.popup-gmaps'）。magnificPopup（{ disableOn：700, type：'iframe'， mainClass： 'mfp-fade'， removalDelay：160, preloader：false， fixedContentPos：false }）;; }）; –

你只需要下面的代碼，並嘗試分析我上一次關於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>

來源

2017-04-08 03:13:56 Ace

使用宏大的彈出窗口嵌入vimeo視頻

回答

相關問題