Embed vimeo video using magnific popup

Question

i am programming a website with Bootstrap and the family/forest one page template (on themeforest.net), i customized the portfolio section of this template to have a video popup when we click on the thumbnail (instead of a full image popup originally).

The popup works perfectly with the 'mfp-iframe' class and the 'video/video_name.mp4' href, so here the code:

I don't wanna use a mp4 video but a vimeo video and it s not working when i replace the href 'video/video_name.mp4' by a vimeo link 'https://vimeo.com/118901221' or a embed vimeo link 'https://player.vimeo.com/video/118901221'

Please somebody can help to resolve that issue.

Did you read the documents on the creators page? http://dimsemenov.com/plugins/magnific-popup/documentation.html — mlegg, May 01 '16 at 13:20
yes for sure i well checked the "iframe type" section which is about vimeo video but i don't overstand how to include javscript patterns on the html code to setup the video src. I successfully used a mp4 video with the 'mfp-iframe' class but how to use a vimeo video? — Jah Mik, May 01 '16 at 13:47

score 1 · Answer 1 · edited May 23 '17 at 12:02

You just need the following codes below and try to analyze my problem about Vimeo last time MAGNIFIC-POPUP: Embed videos from Vimeo on my site using magnefic popup. If ever you encounter my problem in 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>

score 0 · Answer 2 · edited May 23 '17 at 11:47

0

You need to supply the direct link to the video. In the case of vimeo, this is only available if you've paid for a premium account. A solution would be to re-upload the video to YouTube and then get the direct link by doing this:

Copy the full URL to the video on YouTube.
Install VLC Media Player and open it.
Hit Media (menu)... and Open Network Stream.
Paste your video URL there and hit Play.
Hit Tools (menu)... Media Information. You'll find the direct URL to the video there. Use this in your website.

If you want to actually embed from YT or vimeo, check this out:

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

From the documentation. And this question.

edited May 23 '17 at 11:47

Community

1
1

answered May 01 '16 at 13:20

fnune

5,256
1
21
35

thanks yes i can get easily a video url but the problem is how to include a embed vimeo or youtube video inside the magnific popup? – Jah Mik May 01 '16 at 13:29
it is redirecting on www.youtube.com/watch?v=0O2aH4XLbto and not appearing in the popup – Jah Mik May 01 '16 at 13:40
where do i must paste this code exactly? $(document).ready(function() { $('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({ disableOn: 700, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: false }); }); – Jah Mik May 04 '16 at 12:55

Embed vimeo video using magnific popup

2 Answers2